6

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

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 转换属性。

4

4 回答 4

1

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

$(".note").position()不同于真实的left和top的note

这是因为您旋转了元素，您可以通过删除transformcss 中的 来自己查看。可以在此处找到修复：使用 CSS3 旋转属性时的 jQuery .position() 奇怪

于 2012-05-18T05:42:27.197 回答
1

你看过这个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-18T05:42:39.523 回答
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 回答
0

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

本地存储：

  • 值在 Windows 和浏览器的生命周期之后仍然存在。
  • 在同一来源运行的每个窗口或选项卡之间共享值。

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

你应该试试这个

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