div位置在使用jQuery可拖动HTML本地存储时略有偏移

我有一个可拖动的div元素，它使用HTML 5 localStorage来记住它在用户页面上的位置。这工作正常。div位置在使用jQuery可拖动HTML本地存储时略有偏移

我还使用window.addEventListener来更新位置，如果在另一个打开的选项卡中拖动div。这可以工作，但div在一个浏览器选项卡中的位置稍微偏移到另一个选项卡中的div。有谁知道这是什么原因造成的？

一个基本的例子如下。将它保存为html文件，并在两个不同的选项卡中打开它以查看发生了什么。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
    <style type="text/css"> 
    .note 
    { 
     position: absolute; 
     width:200px; 
     height:220px; 
     background: #2E2E2E; 
     top: 50px; 
     left: 50px; 

    transform:rotate(7deg); 
    -ms-transform:rotate(7deg); 
    -moz-transform:rotate(7deg); 
    -webkit-transform:rotate(7deg); 
    -o-transform:rotate(7deg); 
    } 


    </style> 

    <script type="text/javascript"> 
     $(function() { 


      var note = $(".note"); 
      updatePosition(note); 

      note.draggable({ stop: function() { 

       var left = $(this).position().left; 
       var top = $(this).position().top; 

       localStorage.setItem("left", left); 
       localStorage.setItem("top", top); 

      } 
      }); 

      window.addEventListener("storage", function (e) { 
       updatePosition(note); 
      }, 

      false); 


     }); 

      function updatePosition(note) { 

      var left = localStorage.getItem("left"); 
      var top = localStorage.getItem("top"); 
      note.css({ left: left + "px", top: top + "px" }); 

      } 
    </script> 

</head> 
<body> 

<div class="note"></div> 

</body> 
</html>

更新：它导致偏移量的CSS转换属性。

来源

2012-05-18 kmb64

+1，非常好的问题。我希望更多的人以这种方式提出问题...... –

这是一个非常容易的问题，因为我们可以将源代码直接粘贴到本地文件中，而不必担心jquery库将包含在哪里。 –

这似乎是如果我有这个文件在2个不同的标签中打开，我移动一个div，另一个div也会在另一个标签上移动。奇怪的！ –

你看过这个bug吗？ http://bugs.jquery.com/ticket/8362

我看到你的JS正在做的一切正常，但jQuery从.css（）返回错误的值。

这里有一个工作示例：http://db.tt/gCHuZ7zz

和相关的代码更改：

 note.draggable({ stop: function() { 

      var left = this.offsetLeft; 
      var top = this.offsetTop; 

      localStorage.setItem("left", left); 
      localStorage.setItem("top", top); 

     } 
     }); 



     function updatePosition(note) { 

     var left = localStorage.getItem("left"); 
     var top = localStorage.getItem("top"); 
     note.css({ left: left + "px", top: top + "px" }); 

     note[0].offsetTop = top; 
     note[0].offsetLeft = left 

     }

来源

2012-05-18 05:42:39 Jeff

您是否注意到，当您点击它拖动时，css转换也会导致div变得有点快活/抖动？这看起来像另一个jQuery bug：http://bugs.jqueryui.com/ticket/6844。知道任何解决这个问题的方法吗？ – kmb64

个人没有经验，但它看起来像有一个jQuery Transformable插件，有一个更好的draggable（）函数...托管网站已关闭，但这里是一个小提琴使用它：http://jsfiddle.net/aflin/MhGPU/ – Jeff

我认为在css类的转换属性中没有问题。其实，这是html5本地存储的行为。

本地存储：

值持续超过Windows和浏览器的寿命。
数值在每个窗口或标签上共享，它们在同一个来源运行。

现在，看看您设置的代码并获取div在本地存储中的位置。当div拖动你的'窗口'时，事件监听器被触发，从本地存储获取位置并更新位置。所以，这就是为什么浏览器div的不同选项卡保持相同的位置。

你应该试试这个

var left = this.offsetLeft; 
var top = this.offsetTop;

来源

2012-05-18 05:09:50 Talha

，我发现这里的问题使用Chrome的检查。

$(".note").position()是在CSS去除transform从note

这是因为你旋转的元素，你可以看到自己真正的left和top不同。修正可以在这里找到：jQuery .position() strangeness while using CSS3 rotate attribute

来源

2012-05-18 05:42:27 TiansHUo

尝试

var left = this.offsetLeft; 
    var top = this.offsetTop;

代替

var left = $(this).position().left; 
    var top = $(this).position().top;

来源

2012-05-18 05:49:35 Rab

div位置在使用jQuery可拖动HTML本地存储时略有偏移

回答

相关问题