is there a way to make divs not overlap eachother

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

why not use the .css('z-index') or zIndex not sure. that handles the over lapping. - give a value of the elements that need to be on the bottom smaller e.g: 1 - give a value of the elements that need to be on the top bigger number e.g : 3 - if you need the dragged element to go in between then give it a value of 2.

or u can use it on css as a class where the z-index controls their overlap

Answer 2

You need to go into the jquery code for the draggable ui effect. There must be a line in the code where the z-index of the element is changed to a very high number so that it appears above all other elements. You can remove this line and it should make it so the elements do not change their vertical layer when dragging.

I would run a find for "z-index" in the ui file.

Answer 3

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 4

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

Answer 5

I would recommend you use zIndex option of draggble

$( ".selector" ).draggable({ zIndex: 100 });

http://api.jqueryui.com/draggable/#option-zIndex