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

Question

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

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

Run Code Online (Sandbox Code Playgroud)

更新:它导致偏移的CSS转换属性.

Answer 1

Jef*_*eff 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

        }

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，6 月前
查看次数：	952 次
最近记录：	8 年，7 月前