可嵌套拖放的可拖动组件

Question

跟随这个例子。

<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/

- David Rodrigues

---

我已经在jsfiddle上尝试了您的示例，看起来它工作正常。我已经成功地将两个对象拖放到弹出窗口中。 - Rajiv Ranjan

是的，但是请将它们再次带回框架，然后可以再次拖动到弹出窗口中... 没有任何变化。 - David Rodrigues

Answer 1

默认情况下，当一个元素被拖放到嵌套的可拖放区域上时，每个可拖放区域都会接收该元素，这就是原因。

在您的情况下，内部的拖放事件被触发，但外部div也被触发并将元素包含在内。

您可以将 greedy 选项设置为 true，这样任何父级可拖放区域都不会接收该元素。拖放事件仍然会正常冒泡，但可以检查 event.target 来查看哪个可拖放区域接收了可拖动元素。

参考文献：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/

- Irvin Dominin