JQuery可排序和自动滚动

Question

我试图让JQuery Sortable工作,但我遇到了轻微的可用性问题.

我尝试排序的列表非常大(约200项).如果用户尝试将顶部项目向右拖动到底部,则一旦项目到达屏幕可见部分的底部,页面将滚动一小部分,然后停止.要触发更多向下滚动,您必须以圆周运动移动鼠标,直到项目到达底部.

是否有任何方法可以在拖动项目并自动向下滚动屏幕时跟踪鼠标的位置？

Answer 1

我会看一下scroll,scrollSensativity和scrollSpeed选项.

你可以这样做:

$("#sort").sortable({ scroll: true, scrollSensitivity: 100 });

要么

$("#sort").sortable({ scroll: true, scrollSpeed: 100 });

甚至

$("#sort").sortable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 100 });

Answer 2

虽然scrollSensitivity的值控制辅助项接近边(顶部或底部)时的滚动行为,但是如果使用以下代码,则可以在拖动时使用"sort"事件无条件滚动:

$(".sortable").sortable({
    scroll: true,
    scrollSensitivity: 80,
    scrollSpeed: 3,
    sort: function(event, ui) {
        var currentScrollTop = $(window).scrollTop(),
            topHelper = ui.position.top,
            delta = topHelper - currentScrollTop;
        setTimeout(function() {
            $(window).scrollTop(currentScrollTop + delta);
        }, 5);
    }
});

不确定这是否完全解决了您所看到的问题,但我发现使用此方法可以提高列表的可用性.这是jsfiddle的链接.

Answer 3

您可以根据 mouseMove 返回的位置触发事件。这是一个简单的教程：http://jquery-howto.blogspot.com/2009/07/identifying- located-mouse-position-in.html

本教程可能会帮助您入门：http://valums.com/vertical-scrolling-menu/ 这将实现相同的效果：http://www.queness.com/resources/html/scrollmenu/index.html