Menu
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.
645
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
