Пользовательский интерфейс jQuery, Draggable, Droppable, Автопрокрутка - PullRequest
Новая
       7

Пользовательский интерфейс jQuery, Draggable, Droppable, Автопрокрутка

7 голосов
/ 01 марта 2011

У меня есть набор отбрасываемых элементов li, который принимает перетаскиваемый значок. Список элементов находится в прокручиваемом элементе div. Я собрал простой пример здесь: http://www.nerdydork.com/demos/dragscroll/

Мне интересно, есть ли способ автоматической прокрутки списка элементов при перетаскивании перетаскиваемого элемента. Например, предположим, что вы находитесь где-то посередине, как http://www.nerdydork.com/demos/dragscroll/#j. По мере приближения к вершине элемента div он начинает прокручиваться вверх, а когда вы приближаетесь к нижней части элемента div, он начинает прокручиваться вниз.

Кто-нибудь знает, как этого добиться с помощью jQuery?

UPDATE

Я все ближе. Я создал фиксированный div в верхней и нижней частях контейнера div. При наведении курсора запускается автопрокрутка с использованием http://plugins.jquery.com/project/aautoscroll

Теперь проблема в том, что когда я нахожусь над нижней областью, это портит мои перетаскиваемые буквы. Это только кажется, что проблема с нижней областью автопрокрутки.

Чтобы увидеть ошибку, о которой я говорю, посмотрите это короткое видео: http://screencast.com/t/JBFWzhPzGfz

Обратите внимание, что когда он автоматически прокручивается вниз, курсор не находится над правильной буквой. В конце видео вы можете видеть, что, если вы наведите курсор мыши на левое поле списка, оно каким-то образом сбрасывается и, кажется, снова работает.

Ответы [ 2 ]

6 голосов
/ 22 марта 2011

Установка опции «refreshPositions: true» для перетаскиваемого объекта приведет к тому, что jQuery пересчитает смещения для каждого события мыши. Это должно исправить вашу проблему.

0 голосов
/ 30 сентября 2014

Вы также можете попробовать использовать функцию интервала: 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();
    },
})
...