3

プロジェクトで jQuery UI Draggable を使用しています。ドラッグ可能なオブジェクトのグリッド (10x10 グリッド) オプションを切り替えるチェックボックスがあります。

ただし、グリッドをオンに戻すと、グリッドがオフのときに移動されたオブジェクトは、グリッドがオフのときに移動されなかったオブジェクトと整列しません。つまり、オブジェクトは整列していない別々のグリッド上にあります。

したがって、グリッドがオンになっているときにオブジェクトが常に整列するように、オブジェクトを10単位でスナップさせたいと思います(ユーザーがドラッグしている間、リリース時にスナップするだけではありません)。 jQuery UI でこれを実装する方法を理解します。何か案は？

4

2 に答える 2

2 
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
    #draggable { width: 100px; height: 70px; background: silver; }
  </style>
  <script>
  $(document).ready(function() {
//  $("#draggable").draggable({ grid: [10, 10] });
$("#draggable").draggable();
$("#draggable").draggable({
   stop: function(event, ui) { 
    var left = ui.position.left;
    var top = ui.position.top;

    left = left - left % 10;
    top = top - top % 10;
$("#draggable").offset({left:left,top:top});
console.log($("#draggable").position());
 }
});
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="draggable">Drag me</div>

</body>
于 2012-06-19T04:44:23.967 に答える