jquery - 如何使用 Metro UI CSS 保存可拖动的位置？

Question

使用 Metro UI CSS 创建 draggable很简单:

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

对于最终用户来说，像这样拖动一个元素很有趣，如果我能为用户下次访问保存 draggable 的位置(被拖动后)就更好了。那么我该怎么做呢？

Answer 1

对于这些类型的事情，典型的情况是 javascript 将其 css 作为样式属性处理(在本例中也是如此)。您可以将其样式属性保存在 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"))
})