jquery - jqueryのドラッグ可能[またはなど]を介してドラッグしているときにdivが互いにオーバーラップしないようにする方法はありますか？

Question

jquery draggable（）を介してドラッグしているときにdivが互いにオーバーラップしないようにする方法はありますか？

ユーザーがドラッグできるdivがたくさんありますが、それらを互いにオーバーラップさせることはできません。

基本的に、ユーザーがサイトのコンテンツをサイト内で自由に移動できるキャンバスを作成していますが、他のコンテンツを移動するときに他のコンテンツと重ならないようにする必要があります。何か案は？

score 2 · Accepted Answer

jquery-collisionとjquery-ui-draggable-collisionを試すことができます。完全な開示：私はこれらをsourceforgeで作成してリリースしました。

最初のものはこれを可能にします：

var hit_list = $("#collider").collision(".obstacle");

これは、「＃collider」と重複するすべての「.obstacle」のリストです。

2番目の許可：

$("#collider").draggable( { obstacle: ".obstacle" } );

これにより、（とりわけ）バインドする「衝突」イベントが発生します。

$("#collider").bind( "collision", function(event,ui){...} );

そして、あなたも設定することができます：

$("#collider").draggable( { obstacle: ".obstacle", preventCollision: true } );

ドラッグ中に「#collider」が「.obstacle」と重ならないようにします。

score 1 · Accepted Answer

私はこのプラグインを自分で使用したことはありませんが、それがあなたの答えになるようです: Collidable Draggables。

score 0 · Accepted Answer

ドラッグ可能な UI 効果の jquery コードに入る必要があります。他のすべての要素の上に表示されるように、要素の z-index を非常に大きな数値に変更するコードの行が必要です。この行を削除すると、ドラッグ時に要素の垂直レイヤーが変更されないようにする必要があります。

ui ファイルで「z-index」の検索を実行します。

score 0 · Accepted Answer

draggble の zIndex オプションを使用することをお勧めします

$( ".selector" ).draggable({ zIndex: 100 });

score 0 · Accepted Answer

.css('z-index')または zIndex を使用しない理由は不明です。オーバーラップを処理します。- 下部にある必要がある要素の値を小さくする: 1 - 上部にある必要がある要素の値を大きくする: 3 - ドラッグした要素を間に入れる必要がある場合は、値は 2 です。

または、z-indexがオーバーラップを制御するクラスとしてcssで使用できます

5 に答える 5