6

HTML 5 localStorage を使用してユーザー ページ上の位置を記憶するドラッグ可能な div 要素があります。これはうまくいきます。

window.addEventListenerdivが別の開いているタブにドラッグされた場合、位置を更新するためにも使用しています。これは機能しますが、あるブラウザー タブの 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>

更新: オフセットの原因となっている CSS 変換プロパティです。

4

4 に答える 4

1

試す

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

それ以外の

  var left = $(this).position().left;
  var top = $(this).position().top;
于 2012-05-18T05:49:35.710 に答える
1

ここで Chrome のインスペクタを使用して問題を見つけました。

$(".note").position()leftは実際のものとtopは異なりますnote

これは、要素を回転させたためです。css の を削除することで確認できますtransform。ここで修正を見つけることができます: CSS3 回転属性を使用している間の jQuery .position() の奇妙さ

于 2012-05-18T05:42:27.197 に答える
1

このバグを見たことがありますか？ 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-18T05:42:39.523 に答える
0

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

ローカルストレージ：

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

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

そして、あなたはこれを試してみるべきです

var left = this.offsetLeft;
var top = this.offsetTop;
于 2012-05-18T05:09:50.987 に答える