JQuery draggable - No overlap

Question

is it possible to say "draggable div's -> no overlap" ?

I think the mainproblem is the position:absolute; ... right?

kind reagards Peter

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

There isn't a built-in function for collision detection in jQuery UI draggable, unless you're actually after something like sorting. The closest thing that's built-in to what you want is sortable's plceholder, which looks like this.

The short version is collision detection with every dragged element isn't trivial in terms of performance (depending on the number of elements), so it's left out of the library since it's a very rare request. You could however calculate the collisions yourself inside the draggable's drag event if you really do need the collision detection.