记住页面刷新之间的 jQuery 可拖动工具调色板位置答案

【问题标题】：Remembering a jQuery draggable tool palette position between page refreshes记住页面刷新之间的 jQuery 可拖动工具调色板位置
【发布时间】：2009-08-25 13:23:11
【问题描述】：

我有一个工具面板，当管理员用户登录网站时会显示该面板。调色板是可拖动的（通过 jQueryUI.draggable），我希望它记住页面/刷新之间的位置......是否有这样做的标准方法，或者我应该使用的插件，或者我需要自己滚动（通过 cookie 或其他方式）？

【问题讨论】：

标签： jquery jquery-ui state draggable

【解决方案1】：

Cookie 是一个不错的选择 - 您可以像这样使用 functions by PPK：

$('#palette')
     .css({ top: readCookie("palletteY")*1, left: readCookie("palletteX")*1 })
     .draggable({ stop: function (event, ui) {
         createCookie("palletteX", ui.position.left, 100);
         createCookie("palletteY", ui.position.top, 100);
     } });

【讨论】：

我认为这是最简单的，尤其是。给定 ppk 代码中 cookie 的默认设置...但是，有一点点皱纹 - 调色板使用 position:fixed 显示，即当窗口内容滚动时它保持不变，虽然我可以看到你是解决方案应该工作，它不;-)
是的 - cookie 正在被正确存储 - 和更新 - 正确。但是在页面刷新时，调色板仍会加载到默认位置。代码执行，萤火虫显示样式已经改变......但它仍然存在 - 所以css中有一些错误。我会回复你的。
问题在于转换为数字！ $("#palette") .css({ top: $.cookie("paletteY")*1, left: $.cookie("paletteX")*1 }) .draggable({ stop: function (event, ui) { $.cookie("paletteX", ui.position.left); $.cookie("paletteY", ui.position.top); } });
Awww 多么经典的错误 :) 很高兴你发现了它！

【解决方案2】：

我不知道这样做的插件或标准（尽管它们很可能存在），但无论如何它并不是一个非常复杂的操作。 Cookies 是实现它的一种方式。

我存储这种类型的客户端状态的首选方法是设置一个回调函数，该函数通过 Ajax 将新状态传递给服务器。然后，我可以为所欲为。通常，我会将其存储在会话中，但有时我会决定某些内容应该永久保留并将其从会话中移至数据库。拥有这个存储的服务器端可以让您轻松地进行更改。我建议首先通过 Ajax 回调将其存储在会话中，然后在页面加载时检索它。

【讨论】：

【解决方案3】：

我认为 cookie 是一个很好的解决方案。甚至还有一个 jquery cookie 插件here。您可以将坐标保存在stop event 上的cookie 中。当页面更改时，您可以检查 cookie 是否存在，如果存在则更改可拖动的 css。

您可以将它保存在数据库中的服务器上，但这对我来说似乎有点矫枉过正。因为你必须改变你的架构。

Kevin 建议使用unload event 来保存坐标。这样您就不必在每次拖动停止时都写入 cookie。

【讨论】：

虽然这是我最初的答案……但请记住，在客户端存储 cookie 会产生效果。对于每个页面请求，它们总是被传输到服务器端。 -> 更多的流量。
@elcuco 但它仅供管理员使用，加上存储在服务器上可能意味着额外的数据库查询。
存储在服务器上会带来更好的性能，但整个“个性化”功能的成本要比 cookie 高得多。而且，无论何时移动调色板，都会有一个 ajax 请求来保存位置——这也是一种开销。
无论如何，将静态资源保存在无 cookie 的子域中是最好的选择。
有什么理由不等到卸载事件来保存坐标？无论您选择 AJAX 路由还是 cookie 路由，这都会为您节省一些开销。