Come posso trascinare un elemento in un elenco a discesa usando l'interfaccia utente jQuery sortable()?

Question

Versione corta: Come posso trascinare Link 1 in uno dei menu a discesa sotto Link 3 in questa demo? http://jsfiddle.net/Gdadu/2/

EDIT: Il problema è stato portato fino a quello che dovrebbe accadere quando un elemento viene trascinato sopra un altro: dovrebbe essere posizionato a sinistra/destra o di avviare una nuova sottomenu? Affinché l'elenco sia completamente ordinabile, deve essere presente un modo per rilasciare elementi in sottomenu non esistenti, iniziando un nuovo menu a discesa ul. Potrei inserire uno ul vuoto in ogni voce di elenco che non ne ha ancora uno da servire come destinazione di rilascio, ma il problema sopra esiste ancora.

Questo sembra molto più difficile di quanto pensassi inizialmente, quindi mi scuso per non aver messo più impegno in questo ancora, poiché non avevo considerato alcuni di questi problemi. Sono disposto ad accettare una risposta al problema dichiarato e ad occuparmi del resto in seguito.

---

Ho una lista di navigazione a tendina di base che voglio essere pienamente ordinabili, utilizzando jQuery UI. Qualsiasi elemento li dovrebbe essere in grado di spostarsi in qualsiasi posizione nell'intero elenco. Ho problemi a trascinare gli elementi di elenco di livello superiore in sottomenu, sembra che :hover non si attivi nell'elenco a discesa mentre ci si trova in "modalità di trascinamento", quindi i menu a discesa non vengono visualizzati.

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

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

inizializzazione ordinabili:

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

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

Per esempio, voglio dr ag "Link 1" in un sottomenu, ma non può farlo perché il sottomenu non appare durante il trascinamento, come se :hover viene ignorato. Non sono sicuro se il problema risiede nel CSS o nel javascript. Cosa posso fare su questo?

Buona idea dai commenti:

Forse si potrebbe innescare tutto per espandersi quando un trascinamento inizia

Questo probabilmente funzionerebbe, ma non voglio che l'intero menu di espandersi. Potrebbe essere un sacco di contenuti con molti link e 3 livelli di navigazione e probabilmente si sovrapporrà a tutti i flyout/dropdown (un gran casino).

Answer 1

Ecco un violino che mostra alcuni punti che possono aiutare con la vostra applicazione: http://jsfiddle.net/Gdadu/13/

E 'ben lungi dall'essere perfetto, e come sottolineato nel commento, c'è un paio di problemi logici anche con "l'ordinamento tutto dappertutto ":) Le cose che non funzionano qui sono ordinate in modo che i nidificati tornino al livello più alto, difficili su quelli annidati, ... ma penso che siano disegnati là fuori. Distinguere lo smistamento dal trascinamento potrebbe essere una cosa necessaria con lo stato attuale di jqueryui. Inoltre ho scorciatoia la tua eccellente soluzione css per i sottomenu e li ho creati in javascript per semplificare un po 'le cose.

Ma: Si può cadere all'interno link1 link3 o ul annidata di link3;)