javascript - ドラッグ可能な要素の衝突検出を処理する JQuery プラグインを推奨してください

Question

Draggable JQuery UI プラグインを使用しており、要素間のオーバーラップを禁止する必要があります。衝突検出を自分で作成することもできますが、テスト済みのパッケージを使用することをお勧めします。助言がありますか？

Answer 1

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」と重ならないようにします。

Answer 2

jQueryプラグインをすばやく検索すると次のようになります。

衝突可能なドラッグ可能

まだ早いようですが、チェックする価値があるかもしれません。

Answer 3

I know this question is quite old, but maybe you will find this useful: our Collision Check Plugin for jQuery.

The description is in German, but it should be self-explanatory. You can either use two single elements or even sets of elements and will get back a set of all colliding elements.

Answer 4

Googleによると、JQueryプラグインであるgameQueryには「衝突」機能があります。

http://gamequery.onaluf.org/#manual

上のページで「衝突」という単語を検索してください。

このグーグル検索はあなたに他のいくつかのオプションを与えることができます：

http://www.google.com/search?q=jquery+collision+detection

Answer 5

仮定ですが、必要なものはここで見つけることができると思います：

$.event.special.drop

jQuery で有名な $.event.special.drag を使用してドロップ イベントを作成します。この関数内の this 要素の下に独自の JavaScript コードを配置する .bind( "drop", function( event ){ と、定義したクラス「drop」を持つオブジェクトを表し、event.dragTarget はドラッグされるオブジェクトです。

上記のリンク先のサイトにさらにドキュメントがあります。とにかくこれが必要でした。