jQuery Draggable + ordenable: cómo arrastrar y soltar entre dos listas desplegables

Question

Me gustaría tener dos listas, elementos disponibles y elementos seleccionados, mediante los cuales los elementos disponibles se asignan a los elementos seleccionados mediante arrastrar y soltar. Requiero que los elementos seleccionados sean ordenables, pero no los artículos disponibles. El desafío es que ambas listas pueden contener una cantidad importante de elementos y, por lo tanto, deben ser desplazables.

Aquí está el jQuery que tengo hasta el momento:

 <script type="text/javascript"> 
     $(function() { 
      $("#available > li").draggable({ 
       revert: 'invalid', 
       connectToSortable: '#selected', 
       containment: '#drag_container' 
      }); 

      $("#selected").sortable({ 
       axis: 'y', 
       placeholder: 'ui-state-highlight' 
      }); 
     }); 
    </script> 

Y el HTML correspondiente:

  <div class="drag_container"> 
      <ul id="available" class="drag_column draggable"> 
       <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li> 
       <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li> 
       <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li> 
       <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li> 
       <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li> 
       <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
      </ul> 


      <ul id="selected" class="drag_column draggable sortable" style="margin-left: 20px;"> 
       <li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li> 
       <li id="item8" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li> 
       <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li> 
       <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li> 
       <li id="item11" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 11</li> 
       <li id="item12" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 12</li> 
       <li id="item13" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 13</li> 
       <li id="item14" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 14</li> 
       <li id="item15" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 15</li> 
       <li id="item16" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 16</li> 
       <li id="item17" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 17</li> 
       <li id="item18" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 18</li> 
      </ul> 
      <div style="clear: both">&nbsp;</div> 
     </div> 

Con el requisito de lista desplazable, sin embargo, no puedo obtener el comportamiento que pueden arrastrarse a trabajar elegantemente (vea la demostración en http://pastehtml.com/view/1bsk6bt.html).

Una vez que el elemento que se está arrastrando entra en la lista de Elementos disponibles, desaparece detrás del marco desplazable. Probé el clon helper y también intenté jugar con el contenido de divs, diferentes opciones de desbordamiento, desactivar la opción de desplazamiento en jQuery, pero no puedo hacer que funcione correctamente. Estoy seguro de que alguien ha logrado algo como lo que estoy intentando hacer aquí y puede ahorrarme algo de tiempo. :)

¡Cualquier ayuda sería muy apreciada!

Answer 1

Whew! Eso fue divertido de arreglar.

El primer problema, con la lista desplazándose siempre horizontalmente, lo arreglé con algunos cambios simples de desbordamiento en su CSS. Eliminé ambos atributos de desbordamiento de su .drag_column y puse un desbordamiento: oculto en .drag_container.

.drag_container { 
    width: 1000px; 
    margin: 0 auto; 
    position: relative; 
    border: 1px solid black; 
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
} 

.drag_column { 
    padding: 5px; 
    width: 490px; 
    height: 200px; 
    float: left; 
    position: relative; 
} 

Por desgracia, cuando lo hice que crea un error de posición cuando se trasladó a su arrastrable de una lista a otra (sería disparar hacia arriba, dependiendo de la lista el elemento que ha elegido). Para solucionar esto, agregué la línea "helper: clone" a la función de creación que se puede arrastrar.

$("#available > li").draggable({ 
    revert: 'invalid', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 
    helper: 'clone' 
}); 

Una vez más, esto creó un efecto no deseado. El asistente de clonación lo hace para que la lista original nunca tenga elementos eliminados. Para solucionar esto, tuve que crear manualmente una función que eliminaría el elemento anterior. Lo que hice fue agregar un inicio: función al objeto que se puede arrastrar, que tomó el ID del objeto y lo puso en una variable. Luego, creé un objeto que se puede soltar de su lista #selected e hice una función drop: allí. Esa función de caída simplemente hace una barra deslizante (100) en el objeto con la identificación correspondiente. Tenga en cuenta que tengo una creación de variable al inicio del script; esto corrige un error en IE.

var dragged = null; 
$(function() { 
    $("#available > li").draggable({ 
     revert: 'invalid', 
     connectToSortable: '#selected', 
     containment: '#drag_container', 
     helper: 'clone', 
     start: function(ui, event) { 
      dragged = $(this).attr('id'); 
     } 
    }); 
    $("#selected").droppable({ 
     drop: function(event, ui) { 
      var ident = "#" + dragged; 
      $(ident).slideUp(100); 
     } 
    }); 

he publicado una página con el HTML en http://pastehtml.com/view/1by9nfd.html para que pueda jugar por si quieres. ¡Espero que esto ayude!

Answer 2

que necesita esta funcionalidad y habían encontrado una manera de hacer esto

uso appendTo: "cuerpo" y establecer la posición absoluta en el arranque. El elemento que se arrastra se agrega al cuerpo y siempre está "arriba" de otros elementos porque su posición queda fuera del cuerpo.

$("#available > li").draggable({ 

    revert: 'invalid', 
    appendTo: 'body', 
    helper: 'clone', 
    connectToSortable: '#selected', 
    containment: '#drag_container', 

start: function(event, ui){ 

    $(ui.helper).css('position', 'absolute'); //helper if you are using clone 

}, 


stop: function(event, ui){ 

    $(ui.helper).css('position', 'relative'); // if you want 

} 

}); 

Esperanza esto ayuda