Question

我正在使用一个代码，允许在用户想要在页面上的任何位置移动div。 http://api.jqueryui.com/draggable/

然而，我想要做的是让浏览器/网页记住用户将cbox拖到哪里，以便在刷新页面后保留在那里。现在，如果你移动它，当你刷新它时会把它移回它开始的地方。我认为这是通过cookie完成的，但我无法想到从哪里开始实现这一目标。

http://candyland-couture.com左下方的聊天框是我指的可移动的div。将鼠标悬停在其上方的紫色横幅上并单击并拖动即可拖动。

Answer 1

使用localStorage。保存div的坐标（top和left 也许）在里面。另一种选择是cookie，但对于这种简单的localStorage可能更适合。

Answer 2

您可以使用类似这样的函数将坐标保存到cookie：

RegionNavigationJournal

然后，当您刷新页面时，如果这些cookie存在且其值不为空，则在元素上设置值：

$("#moveme").draggable({
  // Find position where element is dropped.
  stop: function(event, ui) {
    // Show dropped position.
    var Stoppos = $(this).position();
    console.log("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
    //Save the values to cookie o localStorage
    //I'm gonna use jquery cookie plugin
    $.cookie("left",Stoppos.left);
    $.cookie("top",Stoppos.top);
  }
});

您应该在您的网站中加入该插件，所以这里是：https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js

还记得刷新时div的位置吗？

2 个答案: