jQuery UI Clasificable: Desplácese por toda la página y por el contenedor

Question

Tengo dos listas de elementos, y he habilitado la interfaz jQuery UI para ambos. Usé la opción connectWith para permitirme arrastrar entre las dos listas.

Una lista tiene muchos elementos, por lo que le agregué overflow-y: scroll, pero cuando intento tomar un elemento de esa lista y arrastrarlo a la otra, solo se desplaza por la lista, no por toda la página.

Hice una demostración jsFiddle (http://jsfiddle.net/MCcuc/). Desplácese hacia abajo e intente mover Item Q (arrástrelo por la barra gris en la parte superior del cuadro) de la lista roja a la lista verde. Verá que la lista roja se desplaza, pero la página no. ¿Cómo puedo desplazar toda la página y la lista?

sólo estoy permitiendo sortable sin muchas opciones:

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

Answer 1

Eso es de hecho un conflicto con desbordamiento desplazable. El elemento auxiliar que se puede arrastrar está restringido a su elemento primario en ese caso, probablemente porque tratar de "salir del exterior" solo da como resultado la ampliación de su región desplazable.

Una solución consiste en pasar una función helper que clona el elemento arrastrado y lo repapea en el cuerpo de la página. De esta manera, el elemento de ayuda que pueden arrastrarse estará fuera de su matriz original, desde el principio, y por lo tanto se desplazará toda la página:

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

se encuentra un violín actualizado demostrar esto here.