jQueryUI droppable，停止传播到重叠的兄弟 [英] jQueryUI droppable, stop propagation to overlapped sibling

问题描述

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

当我在重叠区域放置它时，它会在两个 droppables 中收到，当物品是兄弟时，贪婪不起作用.有没有办法阻止 zIndex 中较低的 droppables 的接收?

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?

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

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

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

推荐答案

好的，所以我花了一个小时试图弄清楚，然后我一问就找到答案

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/

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

这篇关于jQueryUI droppable，停止传播到重叠的兄弟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！