Menu
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?
823
Limit draggable area using 'containment' option The containment option has a value parent. Now, the draggable area of the child <div> element (<div id='intro'>) is restricted or limited to the element's parent area (width and height), which is another <div> element (<div id='mainContainer'>). You can also do this.
jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.
Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port. If the value of this option is set to false, it will prevent the DOM elements to be dragged .
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.
62
I have never used this plugin myself, but it looks like it could be your answer: Collidable Draggables.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
