Question

以下步骤适用于下面分享的jsFiddle。

步骤：

单击并将Draggable 1拖到Droppable 3的内部可放置栏上。继续按住Draggable 1，不要释放它。
请注意，当Draggable 1位于内部droppable上并且指针完全位于Droppable 3区域时，外部Droppable 3会突出显示，这是预期的。
将Draggable 1移动到Droppable 3的边界之外并将其释放，以便它完全在空白处休息。
单击并拖动Draggable 2.您只需将其拖动到某个随机空白点，而不是拖放到droppable上。
释放可拖动的2。
再次抓取可拖动的1并将其拖到Draggable 3的内部可放置部分上。继续按住Draggable 1，不要释放它。
当Draggable 1位于内部droppable上且指针完全位于Droppable 3区域时，请记下外部Droppable 3容器的状态。

预期结果：

当Draggable 1完全位于内部droppable上并且在Droppable 3的范围内时，外部Droppable 3容器会突出显示。

实际结果：

当Draggable 1完全位于内部droppable上并且位于Droppable 3的范围内时，外部Droppable 3容器不会突出显示。

备注：

如果你调试问题，结果是简单地拖动Draggable 2会导致Droppable 3中的某些状态更改，这样当Droppable 1在内部droppable上时，事件传播不再按预期工作。
此jsFiddle中添加了控制台日志，以帮助突出显示此问题。

相关问题：

我问这个问题，因为它似乎与下面的StackOverflow问题有些相关，但我的情况略有不同。也许它有相同的根本原因，但可能有不同的解决方法？

Over event of droppable isn't working correctly, after draggable is dropped on greedy droppable and dragged again

的jsfiddle：

https://jsfiddle.net/deepankarj/60zz9zgb/

$(function() {
    $("#draggable, #draggable2").draggable({
        cursor: "move",
        cursorAt: {
            top: 0,
            left: 0
        },
    });

    function logEventId(prefix, event) {
        console.log(prefix + ": " + event.target.id); 
    }
    function createLogEventIdFunction(handlerName) {
        return function(event, ui) {
            logEventId(handlerName, event);
        }
    }

    $("#droppable, #droppable-inner").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        tolerance: "pointer",
        over: createLogEventIdFunction("over"),
        out: createLogEventIdFunction("out"),
        drop: function(event, ui) {
            logEventId("drop", event);
            $(this)
                .addClass("ui-state-highlight")
                .find("> p")
                .html("Dropped!");
            return false;
        }
    });

    function decorateWithDroppable(selector, greedy, canAccept, over) {
        canAccept = !!canAccept ? canAccept : function(element) {
            console.log("canAccept: this: " + $(this).attr("id") + ", el: " + element.attr("id") + ", result: true");
            return true;
        };

        over = !!over ? over : createLogEventIdFunction("over");

        $(selector).droppable({
            greedy: greedy,
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            tolerance: "pointer",
            accept: canAccept,
            over: over,
            out: createLogEventIdFunction("out"),
            drop: function(event, ui) {
                logEventId("drop", event);
                $(this)
                    .addClass("ui-state-highlight")
                    .find("> p")
                    .html("Dropped!");
            }
        });
    };

    decorateWithDroppable("#droppable2, #droppable2-inner", true);
    decorateWithDroppable("#droppable3", true);
    decorateWithDroppable("#droppable3-inner", true, function canAccept(element) {
        console.log("canAccept: this: " + $(this).attr("id") + ", el: " + element.attr("id") + ", result: " + (element.attr("id") !== "draggable"));    
        return (element.attr("id") !== "draggable");
    });

});

Answer 1

初始化draggable时，将refreshPositions设置为true对我有效。这是示例代码。

jQuery().draggable({
    ....    
    refreshPositions: true
    ....
});

如果嵌套的droppable在特定场景下不接受拖动，则不会传播过度事件

1 个答案: