jQueryUI droppable, stop propagation to overlapped sibling

Question

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

Answer 1

It's very similar to invertedSpear answer. I had to change it a little bit because enabling/disabling inside "over"/"out" didn't work for me .I had to do below instead

$("#droppable2").droppable({
    greedy: true,
    drop: function (event, ui) {
        $("droppable").droppable("disable");
    }
}

I had to explicitly enable"droppable" div when I needed it. For instance, enable it when starting the drag event. Eg

$("#drageMe").draggable({
 start:function(event,ui){
   $("droppable").droppable("enable");  

} })

Answer 2

$( "#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).

Answer 3

So, when trying to find simple solution I came up with this (and it works for me):

            window.overNowOnThis = "";
            window.olderOnes = [];
            $obj.droppable({
                accept: ".draggable_imgs",
                drop: function(e, ui) {
                    if(window.overNowOnThis == this){
                        // Do whatever
                    }
                },
                over: function(event, ui){
                    window.olderOnes.push(window.overNowOnThis);
                    window.overNowOnThis = this;
                },
                out: function(){
                    var lastElem = window.olderOnes.pop();
                    window.overNowOnThis = lastElem;
                }
            });

Top element would be selected because on it "over" fires the last one. Also - if there is more than two siblings - then when moving out of element we set the last one as current. Using global "window" was for example. Better option would be using classes as it can safely keep data.

Answer 4

In certain circonstances :

myjQuery.droppable({
  over:function(evt,ui){
    ui.draggable.attr('drg_time', this.drg_time = evt.timeStamp)
  },
  accept:function(draggeds){
    if(draggeds.attr('drg_time'))
    {
      return draggeds.attr('drg_time') == this.drg_time
    }
    return draggeds.hasClass('acceptable_classes_here')
  },
  out:function(evt,ui){
    // useless but cleaner
    ui.draggable.removeAttr('drg_time')
  }
  drop:...,
})

Answer 5

I find that using #invertedSpear's method will cause UI state change which is not desirable in some cases. Here is the code.

var lastOpertion = new Date().getTime();

drop: function (event, ui) {
        if (new Date().getTime() - lastOpertion < 100) return;
        lastOpertion = new Date().getTime();
        ....
}

Answer 6

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" )
        }
    });
});