6

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?

jae
  • 61
  • 1
  • 2
  • 1
    Are all of the elements the same size? You might want something more like the sortable portlet demo: jqueryui.com/demos/sortable/#portlets (which is really just 3 columns of sortables that are interconnected), – Rob Van Dam Dec 27 '09 at 01:31
  • 5
    http://stackoverflow.com/questions/773717/please-recommend-a-jquery-plugin-that-handles-collision-detection-for-draggable-e – Sampson Dec 27 '09 at 01:32

5 Answers5

2

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.

eruciform
  • 7,680
  • 1
  • 35
  • 47
  • I tried to do $(".collider").draggable( { obstacle: ".obstacle", preventCollision: true } ); having a div that has both classes .collider and .obstacle and it wouldn't move. What I'm trying to do is to have a bunch of divs which are the same, and that can be dragged but can't collide with each other. – lgomezma Sep 27 '11 at 12:30
  • @lgomezma - you can't have something that is both a collider and its own obstacle, currently. honestly, i hadn't thought of that possibility. can you file a ticket on sourceforge for both of them, and i'll try to make that an option in the future? – eruciform Jan 13 '12 at 21:10
  • 1
    I know this is an old topic, but for people who want something as requested just add to the draggable: `start: function () { $(this).siblings('.draggable').toggleClass('draggable obstacle'); }, stop: function () { $(this).siblings('.obstacle').toggleClass('obstacle draggable');}` – 321X May 14 '12 at 20:52
1

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

marcvangend
  • 5,592
  • 4
  • 22
  • 32
0

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.

Samuel
  • 16,923
  • 6
  • 62
  • 75
0

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

Val
  • 17,336
  • 23
  • 95
  • 144
0

I would recommend you use zIndex option of draggble

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

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

Soner Gönül
  • 97,193
  • 102
  • 206
  • 364
Kiran Shinde
  • 5,732
  • 4
  • 24
  • 41