jQueryUI可投放，停止传播到重叠的同级 [英] jQueryUI droppable, stop propagation to overlapped sibling

问题描述

您可以在此处看到: http://jsfiddle.net/rA4CB/6/

当我在两个重叠区域中都放置了重叠区域时，贪婪在项目为同级物品时不起作用.有什么方法可以阻止zIndex下方的可放置对象的接收?

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不会为可放置元素触发.

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修改为以下内容:

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

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