在嵌套的Droppable上可拖动 [英] Draggable on nested Droppable

问题描述

遵循此示例.

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

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

I want each object to be draggable to popup. once inside the popup, have the possibility to draggable again for the frame

问题是我第二次这样做. 当我尝试将可拖动对象拖放到可弹出窗口时，没有任何反应.

The problem is the second time I do it. When i try draggable object to droppable popup, nothing happenz..

有什么想法吗?

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

推荐答案

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

The reason is because by default, when an element is dropped on nested droppables, each droppable will receive the element.

因此，在您的情况下，将触发内部的drop动作，但也会触发外部的div并获取元素本身.

So in your case the drop of the inner is fired, but the outer div is fired too and get the element in itself.

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

You can set greedy option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.

参考: 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/

这篇关于在嵌套的Droppable上可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！