javascript - 我想要 jquery 可拖动脚本来记住位置

标签 javascript jquery html jquery-ui

这个我已经有了

    <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的位置

最佳答案

尝试使用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相反。

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

关于javascript - 我想要 jquery 可拖动脚本来记住位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39357765/

相关文章:

javascript - 在整个 AngularJS 中使用美元符号前缀属性名称(object.$myprop)?

javascript - 如果 margin-left = 0px,我如何更改我的 margin-left-increase 函数以禁用?

html - 使用媒体查询获得完美图像响应的正确方法是什么?

javascript - 基于Flash的录音机/播放器应用程序对象将如何与网页中的JavaScript通信?

javascript - Jquery 从 div 内的 onclick 中删除

javascript - 如何定义嵌套路由+ ember不渲染嵌套路由的模板

javascript - 如何在 on() 方法内调用 ajax 后执行 javascript

jquery - 缓慢加载 jQuery 自动完成

javascript - AngularJS 动画 div 范围更新

Python3.3 HTML Client TypeError : 'str' does not support the buffer interface