traduccion - jQuery UI, arrastrable, desplegable, desplazamiento automático

jquery drop event

Question

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

Me pregunto si hay una forma 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?

ACTUALIZAR

Me estoy acercando. Creé div fijo en las partes superior e inferior del contenedor div. Al pasar el cursor, comienza un desplazamiento automático usando http://plugins.jquery.com/project/aautoscroll

Ahora el problema es cuando me desplazo sobre el área inferior, arruina mis letras arrastrables. Sin embargo, parece ser solo un problema con el área de desplazamiento automático inferior.

Para ver el error del que hablo, mira este breve video: http://screencast.com/t/JBFWzhPzGfz

Observe cómo cuando se desploma automáticamente, el vuelo estacionario NO está 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

Establecer la opción "refreshPositions: true" para el arrastrable hará que jQuery recalcule los desplazamientos en cada evento del mouse. Eso debería arreglar tu problema.

Answer 2

También puede intentar usar 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();
    },
})