在浏览器中移动图像元素

Moving image elements in a browser

本文关键字：图像元 元素 图像 移动 浏览器      更新时间：2023-09-26

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

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

  1. 自动重置图像的位置，以防用户将图像拖出界外或根本不允许用户将其拖出界外。

  2. 如果用户将图像拖动到示例页面上此处的预定义位置"绿色框"：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

我可以得到一些帮助来让它工作吗？

133不是

有效的CSS位置。您想要133px，或者另一个单位，例如 133em .

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

此错误消息来自这样一个事实，即element.style.left = 'XX';并不完全是浏览器所期望的。你必须说XX的单位是什么。为此，您将使用诸如element.style.left = 'XXpx'或element.style.left = 'XXem'或任何其他单位之类的东西。

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

相关文章：