Question

我一直在尝试制作一个jquery可拖动的文本框，它成功运行，现在我试图让文本框记住它的最后位置的坐标。我搜索了高低。我找到了一些例子，但他们从未奏效过。因此，当我将文本框放在页面上的某个位置并刷新页面时，我希望它位于最后的位置。我将在下面提供的代码是每次刷新它的代码返回到原来的位置。有人可以帮忙吗？

这是代码。

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Something</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #draggable { width: 75px; height: 50px; padding: 0.25em; }
  </style>
  <script>
  $(function() {
  $('#draggable').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
    });

  });
  </script>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #test { width: 75px; height: 50px; padding: 0.25em; }
  </style>
  <script>
  $(function() {
    $( "#test" ).draggable();
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Test</p>
</div>
<div id="test" class="ui-widget-content">
  <p>Test</p>
</div>


</body>
</html>

感谢您的帮助！

Answer 1

如果使用浏览器（F5）刷新页面，则无法恢复elemente的位置而不保存位置（会话，数据库，cookie，本地存储，其他），因为页面已完全重新加载。

例如，您只需使用jquery.cookie插件设置/获取包含拖动div的位置的Cookie：

  $('#draggable').draggable({
      drag: function () {
          var cookie_value = JSON.stringify($(this).offset());
          $.cookie('newPosition', cookie_value, {
              expires: 7
          });
      }
  });

  if ($.cookie('newPosition')) {
      //console.log($.cookie('newPosition'))
      $("#draggable").offset({
          top: JSON.parse($.cookie('newPosition')).top,
          left: JSON.parse($.cookie('newPosition')).left
      })
  }

或调用get / set webmethods来处理jQuery.ajax

的位置

以下是使用Cookie的工作小提琴：http://jsfiddle.net/IrvinDominin/pqhQu/

使用Jquery可拖动框保持位置

1 个答案: