Question

我有一个可拖动的div元素，它使用HTML 5 localStorage来记住它在用户页面上的位置。这很好。

如果在另一个打开的标签页中拖动div，我也会使用window.addEventListener更新位置。这可以工作，但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>

UPDATE：它导致偏移的CSS转换属性。

Answer 1

我在这里使用Chrome的检查员发现了这个问题。

$(".note").position()与left

的真实top和note不同

这是因为您旋转了元素，您可以通过删除css中的transform来亲眼看到。可以在此处找到修复程序：jQuery .position() strangeness while using CSS3 rotate attribute

Answer 2

你看过这个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

        }

Answer 3

尝试

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

而不是

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

Answer 4

我认为css类的转换属性没有问题。实际上，它是html5本地存储的行为。

本地存储：

值超出了Windows和浏览器的生命周期。
在同一来源运行的每个窗口或标签中共享值。

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

你应该试试这个

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

使用带有HTML本地存储的jquery draggable时，Div位置稍微偏移

4 个答案: