jQuery UIドラッグ可能、グリッドにスナップする

Question

私は2つのコンテナを持っています。サムネイルコンテナ、および「ページ」コンテナ。どちらもdivです。サムネイルは、2つのコンテナ間で前後にドラッグできます。サムネイルを「無効」に戻したので、どちらか一方の外にドロップされた場合は、2つのコンテナのいずれかにスナップバックします。

サムネイルは、「ページ」コンテナ内の20x20グリッドにスナップする必要があります。これはクライアントのため、クライアントはサムネイルを任意の場所の「ページ」コンテナに置くことができますが、それでもきれいに整列させることができます。

ドラッグ可能な「グリッド」オプションはこれではあまりうまく機能しないようです。 「グリッド」は、スナップ可能な実際のグリッドがページにあるかのように動作するのではなく、ドラッグを開始するときにドラッグ可能な位置によって決まるようです。

これを修正する方法はありますか？グリッドは、ドラッグを開始するときにドラッグ可能な位置ではなく、「ページ」コンテナに基づいていますか？

Answer 1

チェックのjQuery UIサイト上のスナップ例は：

http://jqueryui.com/demos/draggable/#snap-to

あなたはそれらの同じ例を取ると、グリッドとスナップパラメータの両方を指定することができます。

スナップは、スナップセレクタの左上隅に基づいています。

$("#draggable5").draggable({ snap: ".ui-widget-header", grid: [ 80, 80 ] }); 

Jqueryサイトの例では、大きなコンテナに基づいて「80x80」のボックスがスナップされるようになりました。あなたの状況では

それは100％の幅と高さのdivを作成するのが最も簡単かもしれないが、その後、スナップセット：...その後にスナップするグリッドを指定し、そのDIVに（CSSセレクタを使用して）セレクタを

幸運

Answer 2

ドラッグ可能な開始イベントを使用して開始位置を最も近い20ピクセルに丸めることができます。

ような何か（未テスト...）：

$('#draggable').draggable(
    {snap : grid: [20,20]}, 
    {start : function(event, ui) { 
     var startPosition = $(ui.draggable).position(); 
     $(ui.draggable).css({ 
      'left' : (Math.round(startPosition.left/20)*20)+'px', 
      'top' : (Math.round(startPosition.top/20)*20)+'px'}); 
     } 
    } 
); 

私はそれを達成するために自分自身をしようとしているが、それはもっとトリッキーですので、私は別の容器にドラッグされた要素のクローンを作成しています;-) 私はまだ開始イベントでヘルパーの位置を設定する方法を理解する必要があります...

もちろん、開始位置が既に絶対（ドラッグされた場合など）の場合にのみ機能します。

実際には、このメソッドをストップイベントに適用してグリッドプロパティを削除することでほぼ達成できました。そこには、グリッドは、もはやそれ自体ませんが、それを削除するとき、それはあなた自身のグリッドに行くので、周りのオブジェクトを移動するときには、任意の視覚的なフィードバックを得ることはありません

： ：

stop: function(event, ui) { 
    var stopPosition = $(ui.draggable).position(); 
    $(ui.draggable).css({'left' : (Math.round(stopPosition.left/20)*20)+'px', 'top' : (Math.round(stopPosition.top/20)*20)+'px'}); 
} 

はここで働い例ですhttp://jsfiddle.net/qNaHE/3/