Please recommend a JQuery plugin that handles coll

问题:

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 5 years ago.

We're using the Draggable JQuery UI plugin and need to disallow overlapping among our elements. We could write some collision detection ourselves but would prefer to use a tested package. Any suggestions?

回答1:

You can try jquery-collision plus jquery-ui-draggable-collision. Full disclosure: I just wrote and released these on sourceforge.

The first allows this:

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

which is the list of all ".obstacle" that overlap "#collider".

The second allows:

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

Which gives you (among other things), a "collision" event to bind to:

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

And you can even set:

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

to prevent "#collider" from ever overlapping any ".obstacle" while dragging.

回答2:

Quick search of jQuery plugins turns up:

Collidable Draggables

Looks like it's still early, but might be worth checking out.

回答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.

回答4:

Google tells me that gameQuery, a JQuery plugin, has a "collision" function:

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

Search for the word "collision" on the page above.

This google search can give you a couple of other options:

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

回答5:

Assuming, but I think what you would need can be found here:

$.event.special.drop

It uses the jQuery famous $.event.special.drag to create de drop event. You can put your own javascript code under the .bind( "drop", function( event ){ the this element inside this function represent the object with the class "drop" you have defined and the event.dragTarget is the object that is being dragged.

More doc at the site linked above. This was what I needed anyway.