HTML5拖动后记住div位置

Question

我希望创建一个本地（离线）HTML5页面，其中包含各种大小的矩形，其中包含一段文本（和链接），可以通过用户拖动来重新定位。没有必要将它们放入任何目标;只需拖动它们。但页面必须记住他们的最终位置，并在重新打开时显示在那里。

我确实想过使用Canvas来做这件事但是在矩形中绘制文本非常慢。最好为每个段落创建一个div（带边框）。到目前为止，我发现的最接近的解决方案是this one，其中一个拖动“搁置”。原始页面为here。

我需要编写哪些代码来存储这些位置本地（离线），最好是通过自行修改HTML页面本身？我知道HTML5中有localStorage和sessionStorage对象，但还没有尝试过使用它们。

PS这个页面供我自己使用，因为我使用Firefox，我对其他浏览器不感兴趣。我更喜欢使用Javascript到jQuery，但欢迎所有建议。

PS在等待回复时，我偶然发现了this site：

  

使用HTML5，CSS3和JavaScript构建，图表是使用canvas创建的，并且可以使用离线使用，这要归功于 ApplicationCache 。

这会是要走的路吗？

Answer 1

您可以将div信息（位置和宽度，（最终也是高度））保存到localstorage中。当你重新加载页面时，你只需要将它们从本地存储中取出来重新渲染整个页面。

jStorage是一个简单的插件，您可以与本地存储“对话”。您可以将一个对象（序列化）存储到此中，然后在页面加载时将其循环出来。