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

Question

使用 Metro UI CSS 创建可拖动对象非常简单：

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

最终用户像这样拖动元素很有趣，如果我可以保存可拖动的位置（被拖动后）以供用户下次访问，那就更好了。那么我该怎么做呢？

Answer 1

对于这些类型的东西，javascript 将其 css 作为样式属性处理是很典型的（在这种情况下也是如此）。您可以将其 style 属性保存在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"))
})