在浏览器中移动图像元素答案

【问题标题】：Moving image elements in a browser在浏览器中移动图像元素
【发布时间】：2012-05-04 07:07:00
【问题描述】：

我正在使用 UIZE JavaScript 框架在 div 中移动图像元素。这运行正常。

我想让这个功能做另外两件事。

自动重置图像的位置，以防用户将图像拖出边界或根本不允许用户将其拖出边界。
如果用户将图像拖到示例页面上的预定义位置“绿色框”：www.marklaurel.com/sample.php 我想显示一个 div，询问用户是否愿意访问相应图片的网站。

我有这个当前由按钮触发的功能：

   <script type="text/javascript">
    function snapBack()
    {
        with (document)
       {
        getElementById('logoUize').style.left = '133';
        getElementById('logoUize').style.top = '6';
        getElementById('logoPsd').style.left = '240';
        getElementById('logoPsd').style.top = '60';
        getElementById('logoAfx').style.left = '240';
        getElementById('logoAfx').style.top = '206';
        getElementById('logoMaya').style.left = '130';
        getElementById('logoMaya').style.top = '237';
        getElementById('logoHtml5').style.left = '22';
        getElementById('logoHtml5').style.top = '194';
        getElementById('logoCss3').style.left = '22';
        getElementById('logoCss3').style.top = '48';
    }
     }
     </script>

但是，我从浏览器控制台收到此警告：

Warning: Error in parsing value for 'left'.  Declaration dropped.
Source File: http://marklaurel.com/sample.php
Line: 0

Warning: Error in parsing value for 'top'.  Declaration dropped.
Source File: http://marklaurel.com/sample.php
Line: 0

能否请我帮我解决这个问题？

【问题讨论】：

好的，感谢您指出我的疏忽。现在对于第二部分，定义 div 中间的正方形目标的最佳方法是什么？

标签： javascript html css dom-events javascript-framework

【解决方案1】：

133 不是有效的 CSS 位置。您需要 133px 或其他单位，例如 133em。

（别担心，几年前我犯了这个错误，然后想知道为什么我的网站只能在 IE 中运行：P）

【讨论】：

【解决方案2】：

此错误消息来自以下事实：element.style.left = 'XX'; 并非浏览器所期望的。你必须说XX是什么单位。为此，您将使用 element.style.left = 'XXpx' 或 element.style.left = 'XXem' 或任何其他单位。

有关可用单位的更多详细信息，请参阅the spec

【讨论】：

谢谢，这是我的一个非常愚蠢的错误，忘记将 px 放在数值之后。