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?
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.
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
I have never used this plugin myself, but it looks like it could be your answer: Collidable Draggables.