JSON中的jquery UI元素的状态

Question

如何将jquery UI中的draggables和droppables状态存储到JSON中？我想保存状态并使用JSON将其检索回来。这是最好的方式还是替代方式？

Answer 1

使用draggable / Droppable事件的callbackhandlers来获取已更改的值。

您可以使用localStorage / sessionStorage保存这些值，因此您无需将数据保存到服务器。

还有一个可用于IE的存储API的填充。

尝试这样的事情：

$( ".yourdraggable_element" ).draggable({
   stop: function(event, ui) {
       localStorage.setItem("left",ui.position().left);
       localStorage.setItem("top",ui.position().top);
   }
});

你现在可以找回位置：

   $(".yourdraggable_element").css("left",localStorage.getItem("left"));
   $(".yourdraggable_element").css("top",localStorage.getItem("top"));

注意：这只是一个起点！例如。你首先要检查localStorage，所以请不要把它作为完整的解决方案！

Answer 2

我建议使用jQuery UI - http://jqueryui.com/，它支持通过Draggable和Droppable交互进行拖放。在涉及JSON回调等时，它们有大量文档。