如何使用jQuery UI sortable（）将元素拖动到下拉列表中？ [英] How can I drag an element into a dropdown list using jQuery UI sortable()?

问题描述

短版本：如何将链接1 拖动到链接3下的下拉菜单在这个演示？ http://jsfiddle.net/Gdadu/2/

EDIT ：当一个项目被拖动到另一个项目上时应该发生什么问题：是否应该放置在左/右或者开始一个新的子菜单？为了使列表完全可排序，必须有一些方法将项目放到不存在的子菜单中，启动一个新的 ul 下拉菜单。我可以在每个没有一个尚未用作放置目标的列表项中插入一个空的 ul ，但上述问题仍然存在。

这似乎比我最初想的困难很多，所以我道歉，因为没有投入更多的精力，因为我没有考虑其中的一些这些问题。我愿意接受所述问题的答案，并在稍后对其余的问题感到担心。

---

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

示例HTML：

 < ul class =dropdown> 
< li>< a href =＃>链接1< / a>< / li> 
< li>< a href =＃>链接2< / a>< / li& 
< li>< a href =＃>链接3< / a> 
< ul> 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a> 
< ul> 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / 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个级别的导航，可能会与所有的弹出/下拉（巨大的混乱）重叠。

解决方案

这里是一个小提琴，显示几点可以帮助您实施： http： //jsfiddle.net/Gdadu/13/

这是远非完美的，正如评论中指出的，还有一些逻辑问题排序一切无处不在:)这里不工作的是排序嵌套的李的回到顶级，排序的嵌套ul的，但我认为他们的草图在那里。区分拖动的排序可能是一个事情与jqueryui的当前状态。

但是：你可以将link1里面的link3或link3的嵌套的ul; ）

Short version: How can I drag Link 1 into one of the dropdowns under Link 3 in this demo? http://jsfiddle.net/Gdadu/2/

EDIT: The issue has been brought up about what should happen when an item is dragged over another: should it be placed to the left/right or start a new submenu? In order for the list to be fully sortable, there has to be some way to drop items into non-existing submenus, starting a new ul dropdown. I could insert an empty ul in every list item that doesn't have one yet to serve as a drop target, but the problem above still exists.

This seems a lot more difficult than I initially thought, so I apologize for not having put more effort into this yet, as I hadn't considered some of these problems. I'm willing to accept an answer to the stated issue and worry about the rest later.

---

I have a basic dropdown navigation list that I want to be fully sortable, using jQuery UI. Any li element should be able to move to any position in the entire list. I'm having trouble with dragging top level list items into submenus, it seems that :hover doesn't trigger on the dropdown list while in "drag mode", so the dropdowns don't appear.

Example 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>

My 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%;
}

Sortable initialization:

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

Demo: http://jsfiddle.net/Gdadu/2/

For example, I want to drag "Link 1" into a submenu, but can't do it because the submenu doesn't appear while dragging, as if :hover is ignored. I'm not sure if the problem lies in the CSS or javascript. What can I do about this?

Good idea from the comments:

Perhaps you could trigger everything to expand when a drag starts

This would probably work, but I don't want the entire menu to expand. It could be a lot of content with many links and 3 levels of navigation, and would probably overlap itself with all the flyouts/dropdowns (huge mess).

解决方案

Here is a fiddle that shows a few points that can help you with your implementation: http://jsfiddle.net/Gdadu/13/

It is far from perfect, and as pointed out in the comment, there is a few logical problems also with "sorting everything everywhere" :) Things not working here are sorting nested li's back to top level, sortables on nested ul's, ... but I think they are sketched out there. Distinguishing the sorting from the dragging might be one thing necessairy with jqueryui's current status. Also I shortcut your excellent css solution for the submenus and made them javascript based as to simplify things a bit.

But: You can drop link1 inside link3 or link3's nested ul ;)

这篇关于如何使用jQuery UI sortable（）将元素拖动到下拉列表中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！