Comment puis-je faire glisser des UL emboîtés dans l'interface utilisateur de jQuery?

Question

J'ai la configuration suivante:

<ul class='_lscolumn'> 
    <li>column1 
     <ul class='_lswindow'> 
      <li>window1 
       <ul class='_lslink'> 
        <li>link1</li> 
        <li>link2</li> 
       </ul> 
      </li> 
      <li>window2</li> 
      <li>window3 
       <ul class='_lslink'> 
        <li>link3</li> 
        <li>link4</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>column2 
     <ul class='_lswindow'> 
      <li>window4</li> 
     </ul> 
    </li> 
    <li>column3 
     <ul class='_lswindow'> 
      <li>window5</li> 
      <li>window6</li> 
     </ul> 
    </li> 
</ul> 

Ce que je veux avec ce pouvoir est de faire glisser des liens vers des classes de fenêtres, et les fenêtres à colonnes. Finalement, je vais ajouter un onglet, les fenêtres devront également pouvoir être déplacées vers des onglets. J'essaie d'utiliser l'interface utilisateur. J'ai un échantillon mis en place à www.linkshelf.com/jQuery/index.html. Le glissement de la fenêtre fonctionne comme je le veux, mais quand je commence à faire glisser des liens, la mise en page se trompe. Quelqu'un sait ce que je fais de mal ici, et ce que je dois faire pour pouvoir glisser les UL emboîtées?

Si je rends les colonnes triables en ajoutant $ ('_ column'). Sortable(); les colonnes trient comme elles devraient, mais les fenêtres et les liens vont bezerk ...

Answer 1

J'ai travaillé sur un JSFiddle pour cela, et ce que j'ai trouvé est qu'il peut fonctionner tant que la cible existe pour faire glisser vers. ..

http://jsfiddle.net/gfosco/fJVMk/

voir comment cela fonctionne, vous pouvez déplacer les liens autour et ils ne seront pas hors d'usage avec les fenêtres ...

I ajouté UL et mis à jour la classe avoir une hauteur minimale, sinon il n'y a nulle part où laisser tomber les liens.

JS:

$('._lswindow').each(function() { 
    $(this).sortable({ 
     connectWith: '._lswindow', 
     cancel: '._lslink' 
    }).disableSelection(); 
}); 

$('._lslink').each(function() { 
    $(this).sortable({ 
     connectWith: '._lslink' }).disableSelection(); 
}); 

addition CSS:

._lslink { 
min-height:20px; 
} 

HTML extrait d'une fenêtre avec conteneur de lien vide:

<ul class='_lswindow'> 
     <li>window4 
      <ul class='_lslink'></ul> 
     </li> 
    </ul>