JQuery draggable - no matches

Question

Can I say "draggable div → no overlap"?

I think the main problem is the position: absolute; ... right?

kind of reagards Peter

Answer 1

There is no built-in collision detection feature in jQuery UI draggable unless you actually do something like sorting. The closest thing that is built into what you need is a sortable plcholder, which looks like this.

The short version of collision detection with each dragged item is not trivial in terms of performance (depending on the number of items), so it remained outside the library, as this is a very rare request. You could, however, calculate collisions yourself in a draggable drag event if you really need collision detection.

Answer 2

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

The first allows this:

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

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

The second allows you to:

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

What gives you (incidentally) a “collision” event to bind to:

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

And you can even install:

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

to prevent "#collider" from ever overlapping ".obstacle" when dragging.