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

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：

$("#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);
  }
});

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

$("#moveme").css({top: $.cookie("top"), left: $.cookie("left")});

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