jQuery在带有同一类的嵌套列表上掉落

Question

我有一个我想动态更改的菜单结构。可以这样列出菜单。

<ul>
<li id="1/2" class='draggable'>
    <ul>
        <li id="1/3" class='draggable'>
        content
        </li>
        <li id="2/4" class='draggable'>
            <ul>
                <li id="5/2" class='draggable'>
                content
                </li>
            </ul>
        </li>
    </ul>
</li>
<li id="1/6" class='draggable'>
content
</li>

和jQuery代码看起来像这样：

$( ".draggable" ).draggable({
    revert: 'invalid',
});
$( ".draggable" ).droppable({
    hoverClass: "ui-state-active",
    live: true,
    drop: function(event, ui) {
        var draggableId = ui.draggable.attr("id");
        var droppableId = $(this).droppable('option', 'accept', ui.draggable).attr("id");
        alert(draggableId + droppableId);
    }
});

如您在jQuery代码中所看到的，我想捕获拖放元素，以及它删除的元素。这里的问题在于，jQuery在每个嵌套列表中都使用类拖动运行Drop函数。我只想捕获最深的列表项目。

Answer 1

我不知道您要实现的目标，但您可能想在此处查看有关重叠掉落的类似问题。

另外，我猜如果您想制作树或菜单，jqueryui sortable> connected lists

可能会有更好的运气

甚至有一个专门用于分类菜单/树的插件（不是JQueryui的一部分）：jQuery可排序（尽管同样名称，但不要与上面的插件混淆）

祝你好运！