jQuery Draggable + Sortable - Come trascinare e rilasciare tra due elenchi scorrevoli

Question

Vorrei disporre di due elenchi, elementi disponibili e voci selezionate, in cui gli elementi disponibili vengono assegnati agli elementi selezionati tramite trascinamento della selezione. Richiedo che gli elementi selezionati siano ordinabili, ma non gli articoli disponibili. La sfida è che entrambi gli elenchi possono potenzialmente contenere un numero significativo di elementi e pertanto devono essere scorrevoli.

Qui è la jQuery che ho finora:

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

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

e il corrispondente codice HTML:

  <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 il requisito lista scorrevole, tuttavia, non riesco a ottenere il comportamento draggable al lavoro elegantemente (vedere la demo allo http://pastehtml.com/view/1bsk6bt.html).

Una volta che l'elemento trascinato entra nell'elenco delle voci disponibili, scompare dietro il riquadro scorrevole. Ho provato l'helper clone e ho anche provato a giocare con i div, diverse opzioni di overflow, disattivando l'opzione scroll in jQuery, ma non riuscivo a farlo funzionare correttamente. Sono sicuro che qualcuno là fuori ha realizzato qualcosa di simile a quello che sto cercando di fare qui e mi può risparmiare qualche tempo? :)

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Whew! È stato divertente da risolvere.

Il primo problema, con lo scorrimento dell'elenco per sempre in orizzontale, ho corretto alcune semplici modifiche di overflow nel CSS. Ho rimosso entrambi gli attributi di overflow dal tuo .drag_column e ho inserito un overflow: nascosto in .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; 
} 

Purtroppo, quando ho fatto che ha creato un errore di posizione quando si è spostato il vostro trascinabili da una lista all'altra (che avrebbe sparato verso l'alto, a seconda di quale elemento si è scelto lista). Per risolvere questo problema, ho aggiunto la riga "helper: clone" alla tua funzione di creazione trascinabile.

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

Ancora una volta, questo ha creato un effetto indesiderato. L'helper clone fa in modo che la lista originale non abbia mai cancellato oggetti. Per risolvere questo problema, dovevo creare manualmente una funzione che cancellasse il vecchio articolo. Quello che ho fatto è stato aggiungere un inizio: funzione al tuo oggetto trascinabile, che ha afferrato l'id dell'oggetto e lo ha inserito in una variabile. Poi ho creato un oggetto trascinabile della tua lista #selezionata e ho creato una funzione drop: function there. Questa funzione di rilascio fa semplicemente una slideUp (100) sull'oggetto con l'id corrispondente. Nota che ho una creazione di variabili all'avvio dello script - questo risolve un bug in 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); 
     } 
    }); 

ho postato una pagina con il codice HTML completo a http://pastehtml.com/view/1by9nfd.html in modo da poter giocare, se vuoi. Spero che questo ti aiuti!

Answer 2

avevo bisogno di questa funzionalità e aveva trovato un modo per fare questo

uso appendTo: "corpo" e la posizione impostata assoluta su start. L'elemento trascinato viene aggiunto al corpo ed è sempre "superiore" ad altri elementi perché la sua posizione è assente dal corpo.

$("#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 

} 

}); 

Spero che questo aiuti