Conflicto entre Arrastrar y soltar y ordenar los complementos de jquery

Question

Tengo un conflicto al intentar mezclar esos complementos, he basado mi script en algunas demostraciones. El problema es que cuando arrastro algo dentro de la misma lista, desencadena el evento de caída y ese elemento se agrega al final de la lista, que es correcto si el elemento se descarta en otra lista, pero no en la misma, cuando ponerlo en la misma lista que quiero para insertarlo en esa posición (funciona si se deshabilita el evento de colocación)

js código:

$(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')); 
      } 
     }); 
    }); 

y 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

no se puede mezclar esos complementos: procesan los mismos eventos y no pueden cooperar te juntos O reconsidere su UI o use diferentes herramientas.

¿Es posible hacerlo? Sí, por supuesto. Por ejemplo, Dojo DnD permite ordenar y arrastrar y soltar usando solo un componente: test_dnd.html (enlace al servidor de depuración).

Answer 2

Puede hacer esto, más o menos.

Crea dos enlaces en cada elemento para usar como identificadores.

Haga que la lista se pueda ordenar con un solo controlador.

Haga que la lista sea arrastrable por el otro controlador.

Ahora, cuando toma una manecilla u otra, solo se activará un complemento y los eventos se procesarán correctamente.

Answer 3

Si desea mover un elemento <li> de una lista a otra, puede simplemente usar la propiedad connectWith de sortable(). Solo mira en la documentación.