is there a way to make divs not overlap eachother while dragging via jquery draggable [or etc..]?

Question

is there a way to make divs not overlap eachother while dragging via jquery draggable()?

i have a bunch of divs that user can drag around but i can not have them overlap eachother.

basically i'm creating a canvas where user can freely move the site's contents around the site but it needs to not overlap the other content while moving them. any ideas?

Answer 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.

Answer 2

I have never used this plugin myself, but it looks like it could be your answer: Collidable Draggables.