All geek questions in one place

Div position is slightly biased when using jquery drag and drop with local HTML storage

I have a divgable div element that uses HTML 5 localStorage to remember its position on the users page. It works great.

I also use window.addEventListener to update the position if the div was dragged to another open tab. This works, but the div position in one browser tab is slightly offset in the div on another tab. Does anyone know what causes this?

Below is a basic example. Save it as an html file and open it on two different tabs to see what happens.

 <!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 transform properties causing an offset.

+6
source share
4 answers

Have you looked at this error? 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 is a working example: http://db.tt/gCHuZ7zz

And the corresponding 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 }
+1
source

I found the problem here using the Chrome inspector.

$(".note").position() is different from real left and top from note

This is because you rotated the element, you can see for yourself by deleting transform in css. The fix can be found here: jQuery.position () weirdness when using CSS3 rotation attribute

+1
source

try

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

instead

  var left = $(this).position().left; var top = $(this).position().top;
+1
source

I think there are no problems with the conversion properties of the css class. Actually, this is the behavior of the html5 local storage.

Local storage:

  • Values ​​are stored outside the life of windows and browsers.
  • Values ​​are shared between each window or tab working with the same start.

Now look at your code that you installed and get the div position in local storage. And when the div is dragging, you start the “window” event listener, which gets the position from local storage and updates the position. So why on different tabs of the browser div keeps the same position.

And you have to try this

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

Source: https://habr.com/ru/post/916058/

More articles:


All Articles