JQuery UI - 如何将包含应用于匹配多个div的选择器？

Question

例:

<div>
    <div class='drop'>
        <div class='drag'></div>
    </div>
    <div class='drop'>
    </div>
    <div class='drop'>
    </div>
    <div class='drop'>
    </div>
    <div>
    </div>
</div>

$('div.drag').draggable({ containment: 'div.drop' });

通常,如果只有1个"div.drop"元素,则它按预期工作.如果有多于1个(如上例所示),我认为它将被拖放到任何"div.drop"div中.事实证明,它只能被"div.drop"选择器匹配的第一个元素可拖动/可拖放.

有没有解决方法(也就是说,只在"div.drop"div中使它包含/ droppable/draggable)？

编辑:我猜你是对的.经过一番反省后,我意识到我没有采用你建议的解决方案,因为div之间有填充,我不希望在填充区域上删除"div.drag"div.

Answer 1

事情不是这样的！！遏制是对拖动的约束界限。

您想要拖放。
然后你必须为 div.grag 配置拖动：

$('div.drag').draggable();

并为 div.drop 配置 drop：

$('div.drop').droppable();

您可以使用第一个 div 级别为拖动元素添加包含：

<div id='dragZone'>
    <div class='drop'>
        <div class='drag'></div>
    </div>
    <div class='drop'>
    </div>
</div>


$('div.drag').draggable({ containment: '#dragZone'});