jQuery UI, arrastrable, desplegable, desplazamiento automático

Question

Tengo un conjunto de elementos li que se pueden soltar y aceptan un icono que se puede arrastrar. La lista de elementos se encuentra en un elemento div desplazable. Aquí puse un ejemplo simple: http://www.nerdydork.com/demos/dragscroll/

Me pregunto si hay una manera de desplazar automáticamente la lista de elementos cuando está arrastrando el elemento arrastrable. Por ejemplo, digamos que estás en el medio, como http://www.nerdydork.com/demos/dragscroll/#j. A medida que te acercas a la parte superior de la div, comenzará a desplazarse hacia arriba, a medida que te acerques a la parte inferior de la div comenzará a desplazarse hacia abajo.

¿Alguien sabe cómo lograr esto con jQuery?

ACTUALIZACIÓN

estoy cada vez más cerca. Creé div fijo en las partes inferiores del contenedor &. Al pasar el cursor por encima de este, se inicia un desplazamiento automático utilizando http://plugins.jquery.com/project/aautoscroll

Ahora el problema es que cuando sobrevivo la zona inferior, se arruina el archivo arrastrable de las letras. Sin embargo, parece ser solo un problema con el área de desplazamiento automático inferior.

Para ver el error que estoy hablando, mira este vídeo de corta duración: http://screencast.com/t/JBFWzhPzGfz

Note como cuando autoscrolls abajo, el vuelo estacionario no es sobre la letra correcta. Hacia el final del video, puede ver que si pasa el cursor sobre el margen izquierdo de la lista, de alguna manera se restablece y parece funcionar nuevamente.

Answer 1

Al configurar la opción "refreshPositions: true" para arrastrar, jQuery recalcula las compensaciones en cada evento del mouse. Eso debería arreglar tu problema.

Answer 2

también se puede tratar de utilizar una función de intervalo: http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) { 
    $("#sortableContainer").append('<div class="sortable"></div>'); 
    $("#droppableContainer").append('<div class="droppable"></div>'); 
}; 

var adding = 0 
var scrollInterval = null; 

$("#sortableContainer").sortable({ 
    refreshPositions: true, 
    start: function (e, ui) { 
     scrollInterval = setInterval(function() { 
      var foo = $("#droppableContainer").scrollTop(); 
      $("#droppableContainer").scrollTop(foo + adding); 
     }, 50) 
    }, 
    stop: function (e, ui) { 
     clearInterval(scrollInterval); 
    }, 
    sort: function (e, ui) { 
     var top = e.pageY - $("#droppableContainer").offset().top 
     if (top < 10) { 
      adding = -15 
     } else if (top > $("#droppableContainer").height() - 10) { 
      adding = 15 
     } else { 
      adding = 0 
     } 
    }, 
}); 
$(".droppable").droppable({ 
    hoverClass: "active", 
    accept: ".sortable", 
    drop: function (event, ui) { 
     ui.draggable.remove(); 
    }, 
})