Conflit entre glisser et déposer et plugins jquery triables

Question

J'ai un conflit en essayant de mélanger ces plugins, j'ai basé mon script dans certaines démos. Le problème est que lorsque je fais glisser quelque chose dans la même liste, il déclenche l'événement drop et cet élément est ajouté à la fin de la liste, ce qui est correct si l'élément est déposé dans une autre liste, mais pas déposez dans la même liste que je veux insérer dans cette position (cela fonctionne si je désactive l'événement drop)

le code:

$(document).ready(function() { 
     $("#sortlist1").treeview(); 
     $("#sortlist1").droppable({ 
     accept: ".item", 
     drop: function(ev, ui) { 
      alert(ui.sender) 
      $("#sortlist1").append($(ui.draggable));  
     } 
     }); 
     $("#sortlist2").droppable({ 
      accept: ".item", 
      drop: function(ev, ui) { 
       $("#sortlist2").append($(ui.draggable)); 
      } 
      }); 
     $("#sortlist3").droppable({ 
      accept: ".item", 
      drop: function(ev, ui) { 
       $("#sortlist3").append($(ui.draggable)); 
      } 
      }); 
     $('.sortlist').sortable({ 
      handle : '.icono', 
      update : function() { 
       $('input#sortlist').val($('.sortlist').sortable('serialize')); 
      } 
     }); 
    }); 

Et html:

<ul class="sortlist treeview lista" id="sortlist1"> 
     <li id="listItem_1" class="expandable closed item"> 
      <div class="hitarea closed-hitarea expandable-hitarea lastExpandable-hitarea"> 
       <img src="img/arrow_out.png" class="icono" alt="move" /> 
      </div> 
      numero 1<input type="checkbox" /> 
      <ul class="sortlist" id="sublist"> 
       <li id="sublistItem_1"><img src="img/arrow_out.png" class="icono" alt="move" />numero 1<input type="checkbox" /></li> 
       <li id="sublistItem_2"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li> 
      </ul> 
     </li> 
     <li id="listItem_2" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 2<input type="checkbox" /></li> 
     <li id="listItem_3" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 3<input type="checkbox" /></li> 
     <li id="listItem_4" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 4<input type="checkbox" /></li> 
     <li id="listItem_5" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 5<input type="checkbox" /></li> 
     <li id="listItem_6" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 6<input type="checkbox" /></li> 
     <li id="listItem_7" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 7<input type="checkbox" /></li> 
     <li id="listItem_8" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 8<input type="checkbox" /></li> 
     <li id="listItem_9" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 9<input type="checkbox" /></li> 
     <li id="listItem_10" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 10<input type="checkbox" /></li> 
     <li id="listItem_11" class="item"><img src="img/arrow_out.png" class="icono" alt="move" />numero 11<input type="checkbox" /></li> 
    </ul> 
    <ul class="sortlist treeview lista" id="sortlist2"> 
    </ul> 
    <ul class="sortlist treeview lista" id="sortlist3"> 
    </ul> 

Answer 1

Vous ne pouvez pas mélanger ces plugins: ils traitent les mêmes événements, et ne peuvent pas coopérer te ensemble. Repensez votre interface utilisateur ou utilisez des outils différents.

Est-il possible de le faire? Oui bien sûr. Par exemple, Dojo DnD permet à la fois le tri et le glisser-déposer en utilisant un seul composant: test_dnd.html (lien vers le serveur de débogage).

Answer 2

Vous pouvez le faire, en quelque sorte.

Créez deux liens dans chaque élément à utiliser comme descripteurs.

Rendez la liste triable d'un descripteur.

Faites glisser la liste par l'autre poignée. Maintenant, lorsque vous saisissez une poignée ou l'autre, un seul plugin sera activé et les événements seront traités correctement.

Answer 3

Si vous souhaitez déplacer un élément <li> d'une liste à une autre, vous pouvez simplement utiliser la propriété connectWith de sortable(). Regardez dans la documentation.