7

is it possible to say "draggable div's -> no overlap" ?

I think the mainproblem is the position:absolute; ... right?

kind reagards Peter

Peter
  • 549
  • 3
  • 7
  • 19
  • 2
    Hi Peter, we don't know because you have forgotten to supply an example of what you are doing! We can guess that you are using position: absolute somewhere, and some divs, but we know nothing else! – Fenton Aug 14 '10 at 07:38

2 Answers2

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
  • 3
    Doesn't work 100% with jQuery version 1.8.20. Alternative is to use the supplied 1.8.12 version – 321X May 17 '12 at 10:04
  • 1
    @321X - thanks, i'll look into why it doesn't work with 1.8.20 -- could you file a bug fix ticket on sourceforge with an example, please? – eruciform Aug 01 '12 at 03:53
  • 1
    @eruciform, this plugin is AMAZING! The only problem is, that I cannot get it to work with jQuery 1.10.1 and jQuery UI 1.10.3. Is there anything that you can do ? – user1736479 Feb 05 '14 at 13:52
  • [This version](https://gist.github.com/usandfriends/84553821d0fefe6bd11e) ([raw](https://rawgit.com/usandfriends/84553821d0fefe6bd11e/raw/)) of `jquery-ui-draggable-collision` works with `v1.11.1`. – rgajrawala Nov 08 '14 at 17:35
  • @usandfriends That's great. Do you happen to have an unminified version by any chance? – Bruce van der Kooij Feb 05 '15 at 07:02
  • 2
    @usandfriends: Nevermind. Found this fork: https://github.com/dsbaars/jq-ui-draggable-collision – Bruce van der Kooij Feb 05 '15 at 07:07
  • @BrucevanderKooij Nice, thanks for posting that link! Also as an FYI, I updated `jQuery-UI-Draggable-Collision` by updating my `jQuery` versions to `v1.11.1` and fixing each error that came up. It didn't take that long to get everything working. – rgajrawala Feb 05 '15 at 07:11
  • @eruciform: I like this plugin! :) However, the latest version has problems with the padding (looks like it...). You cannot drag an element all the way to the bottom or the right of the parent element. Are you going to release an update to this plugin soon? – Paolo Mar 09 '15 at 15:17
5

There isn't a built-in function for collision detection in jQuery UI draggable, unless you're actually after something like sorting. The closest thing that's built-in to what you want is sortable's plceholder, which looks like this.

The short version is collision detection with every dragged element isn't trivial in terms of performance (depending on the number of elements), so it's left out of the library since it's a very rare request. You could however calculate the collisions yourself inside the draggable's drag event if you really do need the collision detection.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155