HTMLローカルストレージでjquery draggableを使用するとdiv位置が若干オフセットされる

私は、HTML5 localStorageを使用してユーザーページ上の位置を記憶するdraggable div要素を持っています。これは正常に動作します。HTMLローカルストレージでjquery draggableを使用するとdiv位置が若干オフセットされる

また、別の開いているタブでdivをドラッグした場合、位置を更新するのにwindow.addEventListenerを使用しています。これは動作しますが、1つのブラウザタブ内のdivの位置は、別のタブのdivにわずかにオフセットされています。誰がこれを引き起こしているか知っていますか？

基本的な例を以下に示します。それをHTMLファイルとして保存し、2つの異なるタブで開き、何が起こっているかを確認します。

<!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>

UPDATE：オフセットの原因となるCSS変換プロパティ。

出典

2012-05-18 kmb64

+1、優れた質問をしてみてください。もっと多くの人がこのように質問してほしいです... –

jqueryライブラリがどこからインクルードされるのか心配することなく、ソースコードをファイルにローカルに貼り付けることができるので、これは本当に便利な質問です。 –

このファイルを2つの異なるタブで開き、1つのdivを移動すると、他のdivも同じタブに移動するようです。奇妙な！ –

あなたはこのバグを見ましたか？ 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の変換はまた、少しスニッピー/これは別のjQueryのバグのようです：http://bugs.jqueryui.com/ticket/6844。これもどんな回避策も知っていますか？ – kmb64

個人的な経験はありませんが、プラグインの方が優れているdraggable（）関数を持つjQuery Transformableプラグインがあるようです...ホスティングサイトはダウンしていますが、ここではFiddieを使っています：http://jsfiddle.net/aflin/MhGPU/ – Jeff

私はCSSクラスの変換プロパティに問題はないと思います。実際、html5ローカルストレージの動作です。

ローカルストレージ：

値は、窓やブラウザの存続期間を超えて存続します。
値は、同じ起点で実行されているすべてのウィンドウまたはタブで共有されます。

ここで、設定したコードを見て、ローカルストレージのdivの位置を取得します。そしてdivがドラッグされると、あなたの 'ウィンドウ'イベントリスナーが起動され、ローカルストレージからその位置を取得し、位置を更新します。そのため、ブラウザdivの異なるタブで同じ位置を保持するのはこのためです。

そして、あなたはこの

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

出典

2012-05-18 05:09:50 Talha

を試してみてください、私はChromeのインスペクタを使用してここでの問題を発見しました。

$(".note").position()はこの

noteの本当の leftと top異なっているあなたは要素を回転させるので、あなたはCSSで transformを除去することによって、自分で見ることができます。修正はここにあります： 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

HTMLローカルストレージでjquery draggableを使用するとdiv位置が若干オフセットされる

答えて

関連する問題