jQuery UI ordinabile: Scorri tutta la pagina e il contenitore

Question

Ho due elenchi di elementi e ho abilitato l'interfaccia utente jQuery ordinabile su entrambi. Ho usato l'opzione connectWith per permettermi di trascinare tra i due elenchi.

Un elenco contiene molti elementi, quindi ho aggiunto overflow-y: scroll ad esso, ma quando provo a prendere un elemento da quell'elenco e lo trascino all'altro, scorre solo l'elenco, non l'intera pagina.

Ho creato una demo jsFiddle (http://jsfiddle.net/MCcuc/). Scorri verso il basso e prova a spostare Item Q (trascinalo dalla barra grigia sulla parte superiore della scatola) dalla lista rossa nella lista verde. Vedrai scorrere la lista rossa, ma la pagina no. Come posso scorrere l'intera pagina e la lista?

Sto solo consentendo sortable senza molte opzioni:

$('.sort').sortable({ 
    connectWith: '.sort', 
    handle: '.handle' 
}); 

Answer 1

Questo è in effetti un conflitto con troppopieno scorrevole. L'elemento helagg trascinabile è vincolato al suo genitore in quel caso, probabilmente perché il tentativo di "uscire" dal genitore ha come risultato solo l'allargamento della sua regione di scorrimento.

Una soluzione è passare una funzione helper che clona l'elemento trascinato e lo ripara sotto il corpo della pagina. In questo modo, l'elemento di supporto trascinabile sarà al di fuori del suo genitore originale fin dall'inizio, e quindi farà scorrere l'intera pagina:

$(".sort").sortable({ 
    connectWith: ".sort", 
    handle: ".handle", 
    helper: function(event, element) { 
     return element.clone().appendTo("body"); 
    } 
}); 

troverete un violino aggiornato dimostrando questo here.