Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQueryUI droppable, stop propagation to overlapped sibling

As you can see here: http://jsfiddle.net/rA4CB/6/

When I make the drop in the overlapped area it is received in both droppables, greedy doesn't work when the items are siblings. Is there any way to block the reception on droppables lower in the zIndex?

BTW, mouseOver won't fire for the droppable element as the mouse is actually over the draggable element.

relevant JS:

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        tolerance:'pointer',
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
    $( "#droppable2" ).droppable({
        tolerance:'pointer',
        greedy:true,
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
});
like image 414
invertedSpear Avatar asked Aug 16 '12 23:08

invertedSpear


2 Answers

Okay, so I spend an hour trying to figure it out, then as soon as I ask I then find my answer

http://jsfiddle.net/rA4CB/7/

Modified the JS to the following:

$(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
        tolerance:'pointer',
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        }
    });
    $( "#droppable2" ).droppable({
        tolerance:'pointer',
        greedy:true,
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        },
        over: function(event, ui){
            $( "#droppable" ).droppable( "disable" )
        },
        out: function(event, ui){
            $( "#droppable" ).droppable( "enable" )
        }
    });
});
like image 145
invertedSpear Avatar answered Oct 15 '22 01:10

invertedSpear


$( "#droppable" ).droppable({
    greedy: true,
    drop: function( event, ui ) {
       if(ui.helper.is(".dropped")) {
           return false;
       }
       ui.helper.addClass(".dropped");
    }
});

Just set a css class on ui.helper of draggable. If the draggable has been accepted once, it will be refused by all other droppables (Could be done with the droppable "accept" parameter,too , like accept : ":not(.dropped)" and the class added to ui.draggable).

like image 38
dee34 Avatar answered Oct 15 '22 02:10

dee34