CODEWITHSUNDEEP
drag-and-dropjquery-ui-draggable
v1r00z
v1r00z

Reputation: 796

jquery ui - prevent draggable to be dropped on another inside a droppable div

Im looking for a way to prevent a draggable block to be dragged over another draggable block and vise versa. Or maybe how to detect it's being dragged over it.

http://jsfiddle.net/J7azG/27/ Thanks in advance.

Upvotes: 3

Views: 3200

Answers (2)

pravin
pravin

Reputation: 1153

With revert option provided by jquery draggable you can revert position on invalid drops and overlap.

I have modified the answer given by Keith.Abramo.

Please not you need to use offset rather than position as during the overlap the position gets messed up.

http://jsfiddle.net/J7azG/177/ Uses revert option

ui.draggable.draggable('option','revert',true);
ui.draggable.draggable('option','revert',false);

Another solution would be to make the draggable a droppable and use revert 'invalid' option on it.

http://jsfiddle.net/htWV3/1219/

HTML

<div class="drop">
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
</div>

JS

$('.drop').droppable({
  tolerance: 'fit'
});

$('.drag').draggable({
 revert: 'invalid',
 stop: function(){
     $(this).draggable('option','revert','invalid');
 }
});

$('.drag').droppable({
 greedy: true,
 drop: function(event,ui){
    ui.draggable.draggable('option','revert',true);
 }
});

Disclaimer : I'm not sure who the author of the fiddle is.

Upvotes: 0

Keith.Abramo
Keith.Abramo

Reputation: 6955

I've put together a simple demo which detects overlaps in your draggables. Since their isn't native support to revert on a conditional in the drop event I created my own way of doing it. Here is a jsFiddle with the working solution

http://jsfiddle.net/J7azG/37/

Upvotes: 2

Related Questions