Home/ Questions/Q 7981315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T10:19:53+00:00

I have a draggable div element that uses HTML 5 localStorage to remember its

  • 0

I have a draggable div element that uses HTML 5 localStorage to remember its position on the users page. This works fine.

I’m also using the window.addEventListener to update the position if the div was dragged in another open tab. This works but the div’s position in one browser tab is slightly offset to the div in the another tab. Does anyone know what is causing this?

A basic example is below. Save it as an html file and open it up in two different tabs to see what is happening.

<!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: Its the CSS transformation properties that are causing the offset.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have you looked at this bug? http://bugs.jquery.com/ticket/8362

    I see that your JS is doing everything right but jQuery is returning the wrong value from .css().

    Here’s a working example: http://db.tt/gCHuZ7zz

    And the relevant code changes:

            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

        }
    • 0