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?
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.
Quick search of jQuery plugins turns up:
Looks like it's still early, but might be worth checking out.
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.
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:
Assuming, but I think what you would need can be found here:
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.
来源：https://stackoverflow.com/questions/773717/please-recommend-a-jquery-plugin-that-handles-collision-detection-for-draggable