如何使用 jQuery UI sortable() 将元素拖到下拉列表中？

Question

短版：在这个演示中，如何将Link 1 拖入Link 3 下的下拉列表之一？ http://jsfiddle.net/Gdadu/2/

编辑：已经提出了一个问题，当一个项目被拖到另一个项目上时会发生什么：它应该放在左/右还是开始一个新的子菜单？为了使列表完全可排序，必须有某种方法将项目放入不存在的子菜单中，开始一个新的ul 下拉菜单。我可以在每个还没有用作放置目标的列表项中插入一个空的ul，但上述问题仍然存在。

这似乎比我最初想象的要困难得多，所以我很抱歉没有在这方面付出更多的努力，因为我没有考虑过其中的一些问题。我愿意接受对所述问题的回答，其他问题稍后再考虑。

---

我有一个基本的下拉导航列表，我希望它是完全可排序的，使用 jQuery UI。任何li 元素都应该能够移动到整个列表中的任何位置。我在将顶级列表项拖动到子菜单时遇到问题，似乎:hover 在“拖动模式”下不会在下拉列表中触发，因此不会出现下拉列表。

示例 HTML：

<ul class="dropdown">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a>
                 <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我的 CSS：

.dropdown,
.dropdown li,
.dropdown ul {
    list-style:none;
    margin:0;
    padding:0;
}
.dropdown {
    position:relative;
    display:block;
    z-index:10000;
}
.dropdown ul {
    position:absolute;
    top:100%;
    width:100%;
    visibility:hidden;
    display:none;
    z-index:900;
}
.dropdown ul ul {
    top:0;
    left:100%;
}
.dropdown li {
    position:relative;
    float:left;
}
.dropdown li:hover{
    z-index:910;
    cursor:default;
}
.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
    visibility:visible;
    display:block;
}
.dropdown a {
    text-decoration:none;
    display:block;
    padding:.5em 2em;
    background:#cde;
    border:1px solid #ccc;
}
.dropdown ul li {
    width:100%;
}

可排序初始化：

$('.dropdown').sortable({
    items: 'li'
});

演示：http://jsfiddle.net/Gdadu/2/

比如我想把“Link 1”拖到一个子菜单中，但是因为拖的时候子菜单没有出现，好像:hover被忽略了，所以做不到。我不确定问题出在 CSS 还是 javascript 上。我该怎么办？

来自 cmets 的好主意：

也许你可以在拖动开始时触发一切展开

这可能可行，但我不希望整个菜单扩展。它可能是包含许多链接和 3 级导航的大量内容，并且可能会与所有弹出/下拉菜单重叠（非常混乱）。

Answer 1

这里有一个小提琴，它显示了一些可以帮助您实施的要点：http://jsfiddle.net/Gdadu/13/

它远非完美，正如评论中所指出的，“对所有内容进行排序”也存在一些逻辑问题:) 在这里不起作用的事情是将嵌套的 li 排序回顶层，在嵌套的 ul 上排序， ...但我认为它们是在那里勾画出来的。将排序与拖动区分开来可能是 jqueryui 当前状态所必需的一件事。我还为子菜单简化了您出色的 css 解决方案，并使它们基于 javascript 以简化一些事情。

但是：您可以将 link1 放在 link3 或 link3 的嵌套 ul 中；)