15

We're using the Draggable JQuery UI plugin and need to disallow overlapping among our elements. We could write some collision detection ourselves but would prefer to use a tested package. Any suggestions?

Jim
  • 1,014
  • 1
  • 11
  • 22

5 Answers5

16

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
  • 1
    I just downloaded your collider script, its fantastic! How would I go about having a grid of DIVs that grow on hover, and have the other (not hovered) divs shrink as the hovered div grows? – Tom Jul 14 '11 at 14:08
  • @tom: not sure what you mean by that. if you just mean to change their size on hover, make them all some class "growable" and in a hover callback change the size of `$(this)` to bigger and `$(".growable").not($(this))` to smaller. not sure what that has to do with collision though, so i might be misunderstanding. thanks for the kudos though, it means a lot to me. :-) – eruciform Jul 16 '11 at 00:56
  • 1
    Thanks for the reply. I'm trying to accomplish this effect (http://www.adidas.com/us/homepage.asp). As you can see, as one box grows bigger, others shrink to accommodate its size. I'm thinking collision detection is the best way of doing this, as I need the boxes to shrink in the direction that the one box is growing, which your plugin could detect (N S E and W). – Tom Jul 16 '11 at 13:28
  • 1
    I'm trying to implement your 'jquery-ui-draggable-collision' into my project, but I get an error when I first load your files, my guess is that I'm using jquery 1.6.4 and jqueryui-1.8.16, and in your sample code you are using jquery1.5.1. Could you tell me if that's why it doesn't work for me? Thanks. – Eduardo Rascon Oct 07 '11 at 20:08
  • @eiefai: sorry for the delayed response. i'd need more detail on this. could you post a new question and post the link here, and i'll take a look at it? – eruciform Oct 28 '11 at 23:12
  • Kind of late to the game here, but if I want to set up draggable collision listener to detect collision between two instances of the same div class, I can just set the 'obstacle' class to itself. However in this case the div is constantly colliding with itself, is there anyway around this? – xiaolingxiao Dec 25 '12 at 19:59
  • @user1128571 no that by definition collides with itself. but if you give them two classes, where the second class is different, that will work, i.e. `class="sameclass foo"` vs `class="sameclass bar"`, and thus obstacle `.foo` and target `.bar`. or if you give them id's, you can refer to them by `#id1` and `#id2`, regardless of their class. – eruciform Jan 03 '13 at 04:04
  • 1
    also, this request was made on another thread, just fyi. http://stackoverflow.com/questions/1964812/is-there-a-way-to-make-divs-not-overlap-eachother-while-dragging-via-jquery-drag/6052285#comment11065296_6052285 – eruciform Jan 03 '13 at 06:03
  • 1
    Ah ok sweet thanks for the pointer – xiaolingxiao Jan 03 '13 at 20:21
  • Is there any way to avoid collision while resizing? – IdntKnw May 21 '14 at 06:06
  • Hi eruciform, In my page, obstacle is also a draggable. Which stops dragging of all my draggables. Here is the jsfiddle- http://jsfiddle.net/TLtpM/1/ . Can you please let me know solution for this? – pankaj May 28 '14 at 12:20
  • Your `jquery-ui-draggable-collision` looks very promising. There's only 1 problem. Since JQuery 2.0,`.data("draggable")` isn't working anymore. You should now use `.data("ui-draggable")`. I've also got an question. How can i implement the possibility to give `an array of id's` for the `obstacle` checker? ( if you want to contact me personal, you can email me at difrncestick@gmail.com ) Thank you very much in advantage! – Mathlight Jun 13 '14 at 12:55
  • @mathlight i'll check out the ui-draggable bit, but in the mean time, a comma separated list should suffice, i.e. $("#foo,#bar,#baz") for a list of obstacles - that's jquery not my module :-) – eruciform Jun 16 '14 at 09:46
3

Quick search of jQuery plugins turns up:

Collidable Draggables

Looks like it's still early, but might be worth checking out.

Justin Niessner
  • 242,243
  • 40
  • 408
  • 536
2

I know this question is quite old, but maybe you will find this useful: our Collision Check Plugin for jQuery.

The description is in German, but it should be self-explanatory. You can either use two single elements or even sets of elements and will get back a set of all colliding elements.

48design
  • 21
  • 1
1

Google tells me that gameQuery, a JQuery plugin, has a "collision" function:

http://gamequery.onaluf.org/#manual

Search for the word "collision" on the page above.

This google search can give you a couple of other options:

http://www.google.com/search?q=jquery+collision+detection

marzagao
  • 3,756
  • 4
  • 19
  • 14
0

Assuming, but I think what you would need can be found here:

$.event.special.drop

It uses the jQuery famous $.event.special.drag to create de drop event. You can put your own javascript code under the .bind( "drop", function( event ){ the this element inside this function represent the object with the class "drop" you have defined and the event.dragTarget is the object that is being dragged.

More doc at the site linked above. This was what I needed anyway.