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在每个嵌套列表中使用类draggable运行drop函数。 我只想抓住最深的列表项。

Answer 1

我不知道你想要实现什么，但你可能想看看有关http://rextester.com/GQCN45867的类似问题。

此外，我猜你是否正在尝试制作一个树或菜单，你可能会有更好的运气overlapping droppables here

甚至还有一个专门用于排序菜单/树的插件（不是jqueryUI的一部分）：jQueryUI Sortable > Connected Lists（不要与上面的那个混淆，尽管名称相同）

祝你好运！

jquery droppable在具有相同类的嵌套列表上

1 个答案: