如何使用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/

例如,我想将"链接1"拖动到子菜单中,但不能这样做,因为拖动时子菜单不会出现,就好像:hover被忽略一样.我不确定问题出在CSS或javascript中.我该怎么办？

评论中的好主意:

也许你可以在拖动开始时触发所有扩展

这可能会有效,但我不希望整个菜单扩展.它可能是很多链接和3级导航的内容,并且可能与所有弹出/下拉(巨大的混乱)重叠.

Answer 1

这是一个小提琴，它显示了可以帮助您实现的几点：http://jsfiddle.net/Gdadu/13/

它远非完美，正如评论中所指出的，“对所有地方的所有内容进行排序”也存在一些逻辑问题:)这里不起作用的是将嵌套的 li 排序回顶层，对嵌套的 ul 进行排序，...但我认为它们已经被勾勒出来了。以 jqueryui 的现状来说，区分排序和拖动可能是一件必要的事情。另外，我还为子菜单简化了您优秀的 css 解决方案，并使它们基于 javascript，以简化一些事情。

但是：您可以将 link1 放入 link3 或 link3 的嵌套 ul ;)