使用带有 HTML 本地存储的 jquery 可拖动时，Div 位置略有偏移答案

【问题标题】：Div position slightly offset when using jquery draggable with HTML local storage使用带有 HTML 本地存储的 jquery 可拖动时，Div 位置略有偏移
【发布时间】：2017-04-29 09:12:41
【问题描述】：

我有一个可拖动的 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>

更新：导致偏移的 CSS 转换属性。

【问题讨论】：

+1，很好的问题。我希望更多人这样问问题...
这是一个非常方便的问题，因为我们可以将源代码直接粘贴到本地文件中，而不必担心从哪里包含 jquery 库。
似乎如果我在 2 个不同的选项卡中打开此文件并移动一个 div，另一个 div 也会在另一个选项卡上移动。奇怪！
这并不奇怪，这就是它的本意！问题是它们的位置并不完全相同——它们彼此之间略有偏移

标签： jquery html jquery-ui

【解决方案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

        }

【讨论】：

你有没有注意到，当你点击拖拽时，css 转换也会导致 div 有点活泼/晃动？这看起来像另一个 jQuery 错误：bugs.jqueryui.com/ticket/6844。知道任何解决方法吗？
个人没有经验，但看起来有一个 jQuery Transformable 插件，它具有更好的 draggable() 功能...托管站点已关闭，但这里有一个使用它的 Fiddle：jsfiddle.net/aflin/MhGPU

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

试试

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

而不是

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

【讨论】：

【解决方案4】：

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

本地存储：

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

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

你应该试试这个

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

【讨论】：