JQuery可排序和自动滚动
我试图让JQuery Sortable工作，但我遇到了轻微的可用性问题。
我尝试排序的列表非常大（约200项）。 如果用户尝试将顶部项目向右拖动到底部，则一旦项目到达屏幕可见部分的底部，页面将滚动一小部分，然后停止。 要触发更多向下滚动，您必须以圆周运动移动鼠标，直到项目到达底部。
是否有任何方法可以在拖动项目并自动向下滚动屏幕时跟踪鼠标的位置？
我会看一下scroll，scrollSensativity和scrollSpeed选项 。
你可以这样做：
$("#sort").sortable({ scroll: true, scrollSensitivity: 100 }); 要么
$("#sort").sortable({ scroll: true, scrollSpeed: 100 });
甚至
$("#sort").sortable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 100 });
虽然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的链接 。
我认为您可以考虑处理外部滚动以进行排序。 我建议使用计时器和’out’事件进行排序。
这是基于jQueryUI演示页面的一段代码，你可以使用它作为起点，如果想要这样：
$(function() { var scroll = ''; var $scrollable = $("#sortable"); function scrolling(){ if (scroll == 'up') { $scrollable.scrollTop($scrollable.scrollTop()-20); setTimeout(scrolling,50); } else if (scroll == 'down'){ $scrollable.scrollTop($scrollable.scrollTop()+20); setTimeout(scrolling,50); } } $( "#sortable" ).sortable({ scroll:false, out: function( event, ui ) { if (!ui.helper) return; if (ui.offset.top>0) { scroll='down'; } else { scroll='up'; } scrolling(); }, over: function( event, ui ) { scroll=''; }, deactivate:function( event, ui ) { scroll=''; } }); $( "#sortable").disableSelection(); });
这里也是工作示例： JSBIN
抱歉
我没有锁定示例代码并被偶然销毁。 现在又恢复了工作。
我已经删除了overflow-y: scroll从body overflow-y: scroll来解决它。
我有一个带引导程序的响应表，这不会让它工作。
不喜欢这个：
...
像这样是：
...
并使用这些选项：
scroll ， scrollSensitivity ， scrollSpeed
将项目拖动到顶部或底部附近时滚动窗口。
我无法得到任何其他答案。 使用Chrome和可排序的网格，当项目被拖动到窗口的顶部或底部边缘时，需要垂直滚动。
注意：这仅适用于滚动整个窗口。 如果窗口内有可滚动部分并需要滚动它，则无效。
我能够完美地完成以下工作 ：
var currentlyScrolling = false; var SCROLL_AREA_HEIGHT = 40; // Distance from window's top and bottom edge. $(".sortable").sortable({ scroll: true, sort: function(event, ui) { if (currentlyScrolling) { return; } var windowHeight = $(window).height(); var mouseYPosition = event.clientY; if (mouseYPosition < SCROLL_AREA_HEIGHT) { currentlyScrolling = true; $('html, body').animate({ scrollTop: "-=" + windowHeight / 2 + "px" // Scroll up half of window height. }, 400, // 400ms animation. function() { currentlyScrolling = false; }); } else if (mouseYPosition > (windowHeight - SCROLL_AREA_HEIGHT)) { currentlyScrolling = true; $('html, body').animate({ scrollTop: "+=" + windowHeight / 2 + "px" // Scroll down half of window height. }, 400, // 400ms animation. function() { currentlyScrolling = false; }); } } });
Coffeescript版本
currentlyScrolling = false SCROLL_AREA_HEIGHT = 40 sort: (event, ui) -> return if currentlyScrolling windowHeight = $( window ).height() mouseYPosition = event.clientY if mouseYPosition < SCROLL_AREA_HEIGHT # Scroll up. currentlyScrolling = true $( 'html, body' ).animate( { scrollTop: "-=" + windowHeight / 2 + "px" }, 400, () -> currentlyScrolling = false ) else if mouseYPosition > ( windowHeight - SCROLL_AREA_HEIGHT ) # Scroll down. currentlyScrolling = true $( 'html, body' ).animate( { scrollTop: "+=" + windowHeight / 2 + "px" }, 400, () -> currentlyScrolling = false )
您可以根据mouseMove返回的位置触发事件。 这是一个简单的教程： http ： //jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html
本教程可能会帮助您入门： http ： //valums.com/vertical-scrolling-menu/这会产生同样的效果： http ： //www.queness.com/resources/html/scrollmenu/index.html
基于@marty的回答，这里是一个精细调整的代码，它将：1。控制滚动的速度2.向下滚动并向上滚动，没有毛刺。 3.默认速度一次为7px 4.将忽略小于7px的移动
var previousLocation, previousDelta; $( ".selector" ).sortable({ sort: function(event, ui) { var currentScrollTop = $(window).scrollTop(), topHelper = ui.position.top, delta = topHelper - currentScrollTop; setTimeout(function() { if((delta < 7 && delta >=0) || (delta > -7 && delta <=0)) return; if(delta > 7){ delta = 7; if((topHelper - previousDelta) < previousLocation){ delta = (delta * -1); } } if(delta < -7){ delta = -7; if((topHelper - previousDelta) > previousLocation){ delta = (delta * -1); } } $(window).scrollTop(currentScrollTop + delta); previousLocation = topHelper; previousDelta = delta; }, 5); } });