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>

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

问题是我第二次这样做。当我尝试将draggable对象放入droppable弹出窗口时，没有任何事情发生..

任何想法？

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

Answer 1

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

所以在你的情况下，内部的掉落被触发，但外部的div也被触发并且自己获得元素。

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

参考：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上的可拖动

1 个答案: