jQuery Drag plugin - Prevent dropping of a drag element on the top of another

Question

I uses the jQuery pluins event.drag and event.drop

see a demo (just a reference question is not about restricting movement to a container)

Is it possible to prevent dropping of a drag element on the top of another element? but it can be dragged over the other.

Answer 1

While you can accomplish what you want with the event.drag/drop script it is also easily done using jquery ui - draggable/droppable.

For the event., you need to return false if it meets yours criteria (or vice versa):

$('#drag1').drop("init",function(){
            if ( $( this ).is('#badDiv') ) 
                return false;
        })

Here is the jquery ui version, it has a built in accept option in the $().droppable function - it accepts selectors also. This example is reverse of above. The above will let you move anywhere but badDiv, whereas this example below will won't let you move anywhere but the defined droppable:

script:

$("#drag1, #drag2").draggable({
          revert:   'invalid'
 });
$("#drop").droppable({
    accept: '#drag1',
    drop: function(event, ui) {
          // whatever happens on drop
    }
});

html:

<div id="drop" style="width:300px;height:300px;background:blue"></div>
<div id="drag1" style="width:50px;height:50px;background:green"></div>
<div id="drag2" style="width:50px;height:50px;background:yellow"></div>

This creates a big droppable area, but it will only accept the draggable ID of drag1. To see this effect you also need the option in your draggable for revert. This case I set it to invalid so the draggable will slide back to its original position if the drop is not valid.

I'm not sure of your exact application, but maybe this will point you in the right direction of what you're trying to accomplish.

I believe that the sorttables uses a similar setup, but that has more with appending divs and adjusting tables.

Answer 2

You can assign a valid drop target selector in this way.

$('.drag').drag(function( event, dd ){
     // move the dragged element
},{ drop:'#drop1' }); // assign drop selector 

You can also return some drop event handlers "false"

$('.drop').bind('dropinit drop',function( event, dd ){
    if ( $( dd.drag ).is('#drag1') )
        return false;
});