Question

我已经有了这个

    <html>
    <head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>

<body>
<div id="containment-wrapper">
    <div id="draggable" class="ui-widget-content draggable">TEST</div>
</div>
</body>
</html>

现在我想记住刷新时div的位置

Answer 1

尝试使用localStorage：

var position = localStorage.getItem("pos");

if (position) {
      position = position.split(",");

  $("#draggable").css({ 
      position: "relative", 
      left: Number(position[0]), 
      top: Number(position[1]) 
  });
}

$( "#draggable" ).draggable({
  stop: function(e, obj) {
      localStorage.setItem("pos", obj.offset.left + "," + obj.offset.top);
  }
});

Working demo

localStorage将最后拖动的位置存储在浏览器的数据库中。在删除/更改域之前，它对您的域具有持久性。如果您想在浏览器关闭后清除此数据，请改用sessionStorage。

但是，如果您有一个用户会话并希望存储在数据库中以供将来访问，则必须使用表单请求或更好的ajax请求将元素的位置发布到服务器端API，以便将其保存在数据库中并检索以供进一步使用。

我想要jquery draggable脚本来记住位置

1 个答案: