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

I had the same problem and made a small plugin :)

check it out:

https://stackoverflow.com/a/16720944/1308461

Answer 2

If you have a number of droppable in a container area then what????

You must re think for that problem. Greedy works for only parent to child relationship not in siblings. So you must edit droppable js or put your own logic for it.

So if you have a numbers of droppable then you must write some extra code to handle dropping on perfect droppable as it is in this example A number of siblings droppables

For making perfect siblings droppable modify your droppbale as below

        var topElement = undefined;
        var topElementArray = Array();

        $( "#draggable" ).draggable();
        $( ".droppableBox" ).droppable({
            activeClass: "active-droppable",
            tolerance:'pointer',
            over: function( event, ui ) { 
                // This is for only show a message that z-index must be required for proppable
                // you can remove it after testing or after development
                if ($(this).css("z-index") == 'auto') {
                    alert("Please provide z-index for every droppable.");
                    return;
                }
                //

                topElement = undefined;
                topElementArray = Array();
                // Change it as you want to write in your code
                // For Container id or for your specific class for droppable or for both
                $('#demo > .droppableBox').each(function(){                     
                    _left = $(this).offset().left, _right = $(this).offset().left + $(this).width();
                    _top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height();
                    if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) {   
                          topElementArray.push($(this).attr('id'));
                    }
                });
            },
            drop: function( event, ui ) {
                if (!topElement) {
                    topElement = determineTopElement(topElementArray);
                }                   
                if ($(this).attr('id') == $(topElement).attr('id')) {
                    $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
                  // Your code after successful dropped element on specific siblings
                  // Start writing code for dropped element & perfect droppable
                }

            }
        });

        determineTopElement = function(_array) {
            var topElement;
            var zIndexHighest = 0;
            for (i = 0; i < _array.length; i++){
               var element = $("#"+ _array[i]);
               var z_index = $(element).css("z-index");
               if( z_index > zIndexHighest){
                   zIndexHighest = z_index;
                   topElement = element;
               }
            }
            return topElement;       
        }

Answer 3

try greedy option in ui dropable. see the fiddle link below for demo:

http://jsfiddle.net/creators_guru/3vT5C/embedded/result/

$( ".circles" ).droppable({
    greedy: true,
    drop: function( event, ui ) {
        $_data  =   ('drgged class = ' + ui.draggable.attr('class'));
        $_data1 =   ('droped id = #' + $(this).attr('id'));
        $('#data').html($_data + '<br/>'+$_data1);
        return false;
    }
});