jQueryUI可放置,停止传播到重叠的兄弟

Question

正如你在这里看到的:http://jsfiddle.net/rA4CB/6/

当我在重叠区域中进行下降时,它会在两个droppable中接收,当项目是兄弟姐妹时,贪婪不起作用.有没有办法阻止zIndex中较低的droppables接收？

顺便说一句,mouseOver不会为droppable元素触发,因为鼠标实际上在可拖动元素上.

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

Answer 1

好吧,所以我花了一个小时试图解决它,然后我一问我然后找到答案

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

将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!" );
        },
        over: function(event, ui){
            $( "#droppable" ).droppable( "disable" )
        },
        out: 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");
    }
});

只需在draiable的ui.helper上设置一个css类.如果draggable已被接受一次,它将被所有其他droppables拒绝(也可以使用droppable"accept"参数完成,就像accept : ":not(.dropped)"将类添加到ui.draggable一样).