gochobot gochobot - 5 months ago 3x
Javascript Question

How to save positon of draggable with Metro UI CSS?

With Metro UI CSS creating a draggable is pretty easy:

<div data-role="draggable"></div>

It's fun for the end user to drag an element like this, and it would be even nice if I could save the position of draggable (after being dragged) for the user's next visit. So how can I do this?


With these type of things it's typical in which javascript handles it's css as a style attribute (and does so in this case). You could just save it's style attribute in localStorage.


<div class="box" data-role="draggable"></div>


if ( localStorage.getItem("elmPos")) {
  $(".box").attr("style", localStorage.getItem("elmPos"))

$(".box").on("mousedown touchstart mousemove touchmove mouseup touchend", function() {
  localStorage.setItem("elmPos", $(".box").attr("style"))