2

我一直在尝试制作一个 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>

感谢您的帮助！

4

1 回答 1

2

如果您使用浏览器 (F5) 刷新页面，则无法在不将位置保存在某处（会话、数据库、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/

于 2013-05-16T16:27:23.007 回答