可在嵌套的 Droppable 上拖动答案

【问题标题】：Draggable on nested Droppable可在嵌套的 Droppable 上拖动
【发布时间】：2013-09-20 11:07:37
【问题描述】：

按照这个例子。

<div id="containers">
    <div class="frame">
        <div class="popup">Popup</div>
        <div class="object">Object 1</div>
        <div class="object">Object 2</div>            
    </div>
</div>

我希望每个对象都可以拖动以弹出。一旦进入弹出窗口，就有可能再次拖动框架

问题是我第二次这样做。当我尝试将可拖动对象拖放到可放置弹出窗口时，什么也没有发生..

有什么想法吗？

这里是我的代码。 http://jsfiddle.net/PtLLf/49/

【问题讨论】：

我已经在 jsfiddle 上尝试过您的示例，看来它工作正常。我已将两个对象拖放到弹出窗口中。
是的，但是，将它们再次带到框架和下一个，再次拖动以弹出......没有任何变化

标签： javascript jquery jquery-ui

【解决方案1】：

原因是因为默认情况下，当一个元素被放置在嵌套的 droppables 上时，每个 droppable 都会接收到该元素。

所以在你的情况下，内部的 drop 被触发，但外部 div 也被触发并获取元素本身。

您可以将greedy 选项设置为true，任何父droppables 都不会接收该元素。 drop 事件仍然会正常冒泡，但是可以检查 event.target 以查看哪个 droppable 接收到了可拖动元素。

参考：http://api.jqueryui.com/droppable/#option-greedy

代码：

$('#containers .frame .popup').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.object',
     greedy: true ,
    drop: function (event, ui) {
        $(ui.draggable).addClass("insidePopup");
        ui.draggable.detach().appendTo($(this));
    }
});

$('#containers .frame').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.insidePopup',
    greedy: true ,
    drop: function (event, ui) {
        ui.draggable.detach().appendTo($(this));
        $(ui.draggable).removeClass("insidePopup");
    }
});

$('#containers .frame .object').draggable({
    helper: 'clone',
    containment: "document"
});

演示：http://jsfiddle.net/IrvinDominin/dVFgn/

【讨论】：