Jquery UI Sortable, desplazamiento (ejemplo de jsFiddle)

Estoy intentando descubrir cómo hacer que mis ‘listas clasificables’ se desplacen mientras arrastro un elemento de la lista.

El desplazamiento funciona bien en la lista desde la que estoy arrastrando pero no en la lista a la que estoy arrastrando.

http://jsfiddle.net/jordanbaucke/pacbC/1/

Otra pregunta haciendo una cosa similar:

jQuery sortable container scroll div con desbordamiento automático

PD. Pivotaltracker, www.pivotaltracker.com hace esto bien.

Pregunta antigua, pero hoy luché con esto por algunas horas, así que pensé en compartir lo que aprendí.

El desplazamiento ordenable es una función del desplazamiento del padre de desplazamiento, su posición de desplazamiento actual, la posición del elemento actual y la sensibilidad de desplazamiento. La ordenación ejecuta _mouseStart cuando comienza a arrastrar. Esto establece el scrollParent y almacena en caché su desplazamiento para la ordenación actual. Armados con este conocimiento, podemos hacer una pequeña mezcla en el controlador de eventos durante:

over: function (event, ui) { ui.item.data('sortableItem').scrollParent = ui.placeholder.parent(); ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset(); } 

Se activa en exceso cuando el elemento arrastrado cambia los contenedores. El marcador de posición ya se ha movido al nuevo contenedor cuando golpeas el evento over. El código obtiene el nuevo scrollParent y vuelve a ubicar el desplazamiento.

Bifurqué el violín de Tats_innit por el bien de la brevedad: http://jsfiddle.net/3E2Hg/84/

El scrollParent se referencia en otros lugares a lo largo de la estructura del evento, así que no estoy seguro de que esto sea a prueba de balas. Aún así, creo que este es un buen punto de partida. Si encuentro algún error, actualizaré esta respuesta.

Demostración de trabajo http://jsfiddle.net/3E2Hg/1/

Por favor, avíseme si me perdí algo, y solo vea mi respuesta anterior acerca de esto: Desplácese automáticamente div divisible mientras arrastra

Comportamiento : Ahora el div al que está arrastrando también se desplazará. (el código de descanso está abajo)

Espero que esto ayude,

código

 $(function() { var sortlists = $("#List1, #List2").sortable({ tolerance: 'pointer', connectWith: '#List1, #List2', helper: 'original', scroll: true }).on('scroll', function() { sortlists.scrollTop($(this).scrollTop()); }); });​ 

Solo necesitas agregar el overflow: auto; al elemento padre, ya sea ul o #element , o lo que sea.