保存可拖动div jQuery的位置答案

【问题标题】：Save position of draggable div jQuery保存可拖动div jQuery的位置
【发布时间】：2013-02-14 23:03:07
【问题描述】：

我有一个网站，我正在为它制作小部件。这些小部件是可拖动的。我想知道如何保存小部件的位置（以及它是否隐藏[禁用或启用]），并加载位置以及当您再次加入网站时它是否隐藏（使用同一用户） .感谢您的宝贵时间，如果您不明白我需要什么，请发布 cmets。

【问题讨论】：

当然可以。您需要 ajax 删除它们时所有位置的数据（或在发布前等待几秒钟，以防他们在短时间内移动很多），将其保存在他们的用户记录中，然后将它们放在右边下次再放。
你能举个例子吗？我会将其保存在数据库中，与他们的用户名绑定，然后检索它，还是其他什么？谢谢
一个例子是相当多的问题。您将被问到“您尝试过什么”。我可以给你一个逻辑。是的，您会在他们登录或查看页面时检索它
@popnoodles 我不知道如何处理它，这就是我在这里问的原因。我没有尝试过任何东西，我不知道从哪里开始。
好的，我会分解它...

标签： javascript jquery cookies save

【解决方案1】：

我假设您的小部件位于 <ul> 中，每个小部件一个 <li>，这很正常。

能够定位它们
您首先需要按特定顺序排列小部件。想象一下，您已经完成了艰苦的工作并拥有了用户将拥有的数据。对其进行硬编码并让您的模块正确显示。更改数据，查看模块是否按预期显示。
用户需要拖动它们。 jQuery 可拖动是你的朋友。

证明您可以获取数据
能够在它们移动后从页面中获取小部件的顺序。可拖动示例显示了一个 .serialize() 函数。
您还需要知道哪个打开，哪个关闭。你可以使用 jQuery .map() 创建另一个列表，如果你问得好，它可以返回他们的 ID 和状态。
警告屏幕，写入文档，或者最好使用 console.log()。

与服务器交互
如果您只想使用 cookie 进行测试，则可以跳过此步骤，因为浏览器可以设置它们。
但是，如果您想将其与用户信息一起存储以防他们注销、启动新会话或使用另一台计算机，您将需要使用数据库。
您需要了解如何使用 ajax 从浏览器向服务器发送数据。 jQuery 是你的朋友。
您需要了解如何在数据库中存储用户信息。

恢复位置
您希望能够从非硬编码的列表中设置小部件的位置，以便能够使用您保存的数据在页面加载时正确排序小部件。您在第一步中执行了此操作，但使用的是硬编码数据。

【讨论】：

【解决方案2】：

你需要做的是：
在给定时间保存状态。例如当你改变它时。

$('#toBeDragableId').draggable({
   // options...
   drag: funciton(event,ui){
      theUserposition = ui.position;
   }
});

您需要以一致的方式保存theUserposition，例如数据库或使用cookie 或客户端存储。之后，您需要在加载页面时将其恢复并设置。