0

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

4

2 回答 2

2

我假设你的小部件在一个<ul>，<li>每个小部件一个，这是很正常的。

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

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

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

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

于 2013-02-14T23:40:22.283 回答
1

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

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

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

使用 Cookie 的类似问题
示例

于 2013-02-14T23:09:35.220 回答