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

例如，我想醫生ag「鏈接1」到子菜單中，但不能這樣做，因爲子菜單在拖動時不會出現，就好像:hover被忽略。我不確定問題出在CSS或JavaScript上。我能做些什麼呢？從評論

好主意：

也許你可能會引發的一切擴展當拖動開始

這可能會工作，但我不希望整個菜單擴大。它可能有很多鏈接和3級導航的內容，並可能與所有的flyouts/dropdowns（巨大的混亂）重疊。

Answer 1

這裏是一個小提琴，顯示了幾個點，可以幫助您實施：http://jsfiddle.net/Gdadu/13/

這是遠遠不夠完善，並且在評論中指出，也有一些邏輯問題「排序無處不在的東西「:)在這裏不工作的東西是將嵌套的li排序回到頂層，可以對嵌套的ul進行排序，但是我認爲它們在那裏被勾勒出來。從jqueryui的當前狀態中區分排序和拖動可能是一件必不可少的事情。此外，我快捷你的優秀CSS子菜單的解決方案，並使他們的JavaScript基礎，以簡化一些事情。

但：您可以刪除鏈接1內LINK3或LINK3的嵌套UL）