CODEWITHSUNDEEP
jquerydraggable
wizzardmr42
wizzardmr42

Reputation: 1644

How to use jquery draggable to prevent elements being dragged over each other

I'm creating a UI using jquery where multiple elements can be dragged around within a "surface" div. I don't want to allow any of these to overlap and I could really do with enforcing a margin between them. Ideally, I'd like this to happen during the drag operation so that the user can see that they can't actually get the elements over (or even too near to) each other and will realise that they need to drop elsewhere.

I've had a look at the containment option and it doesn't look like it will do what I want. Is there an easy way of doing this that I'm missing?

Upvotes: 0

Views: 398

Answers (1)

wizzardmr42
wizzardmr42

Reputation: 1644

Was able to solve using http://sourceforge.net/projects/jquerycollision/

Needed to add the draggable options obstacle: '.elem:not(.ui-draggable-dragging)', preventCollision: true

where .elem is the class of the draggable elements.

nb. the :not(.ui-draggable-dragging) is required otherwise it prevents collisions with itself and won't move

Upvotes: 1

Related Questions