HTML5拖動後記住div位置

Question

我希望創建一個包含各種大小的矩形的本地（離線）HTML5頁面，其中包含一段文本（和鏈接），可以通過用戶拖動來重新定位。沒有必要將它們放到任何目標中;只需拖動它們即可。但頁面必須記住他們的最終位置，並在重新打開時顯示在那裏。

我確實想過使用Canvas來做到這一點，但在矩形中繪製文本非常緩慢。最好爲每個段落創建一個div（帶邊框）。到目前爲止，我找到的最接近的解決方案是this one，其中一個拖動「旁邊」。原始頁面是here。

我需要寫什麼代碼來存儲這些位置本地（脫機），最好是通過自我修改HTML頁面本身？我知道HTML5中有localStorage和sessionStorage對象，但並未嘗試使用它們。

PS此頁面僅供我個人使用，在使用Firefox時我對其他瀏覽器不感興趣。我更喜歡使用Javascript來jQuery，但所有的建議將是最受歡迎的。

PS雖然等待答覆，我偶然發現this site：

與HTML5，CSS3和JavaScript構建，該圖是用帆布和離線使用是可能創造，這要歸功於ApplicationCache。

這是要走的路嗎？

Answer 1

您可以將div信息（位置和寬度（最終也是高度））保存到本地存儲中。當你重新加載頁面時，你只需要將它們從本地存儲中取出來重新渲染整個事物。

jStorage是一個簡單的插件，您可以「說」您的本地存儲。您可以將一個對象（序列化）存儲到這個對象中，然後在頁面加載時將其循環。