Please recommend a JQuery plugin that handles collision detection for draggable elements.

Question

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?

Answer 1

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

Answer 2

Quick search of jQuery plugins turns up:

Collidable Draggables

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

Answer 3

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.

Answer 4

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.