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本地存儲時略有偏移

回答

相關問題