jquerycssmetro-ui-css

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?

Solution

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