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 に答える