gochobot gochobot - 7 months ago 16
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?

Answer

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.

HTML:

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

JavaScript/JQuery:

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"))
})
Comments