JQuery 可排序和自动滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3739419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Sortable and automatic scrolling
提问by Tahir Hassan
I am trying to get JQuery Sortable to work but I have run into a slight usability problem.
我试图让 JQuery Sortable 工作，但我遇到了一个轻微的可用性问题。
The list that I am trying to sort is quite large (about 200 items). If the user tries to drag the top item right to the bottom, once the item reaches the bottom of the visible part of the screen, the page scrolls a tiny amount, then stops. To trigger more downward scrolling, you have to move the mouse in circular motions about until the item reaches the bottom.
我要排序的列表非常大（大约 200 项）。如果用户尝试将顶部项目向右拖动到底部，一旦项目到达屏幕可见部分的底部，页面会滚动一小段，然后停止。要触发更多向下滚动，您必须以圆周运动移动鼠标，直到项目到达底部。
Is there any method of tracking the position of the mouse while it is dragging an item and automatically scrolling the screen down?
是否有任何方法可以在拖动项目并自动向下滚动屏幕时跟踪鼠标的位置？
回答by digitaldreamer
I would take a look at the scroll, scrollSensativity, and scrollSpeed options.
我会看看scroll、scrollSensativity 和 scrollSpeed options。
You can do something like:
您可以执行以下操作：
$("#sort").sortable({ scroll: true, scrollSensitivity: 100 });
or
或者
$("#sort").sortable({ scroll: true, scrollSpeed: 100 });
or even
甚至
$("#sort").sortable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 100 });
回答by marty
While the value of the scrollSensitivity controls the scroll behaviour when the helper item approaches an edge (top or bottom), you can use the "sort" event to unconditionally scroll while you drag if you use the following code:
虽然当辅助项接近边缘（顶部或底部）时 scrollSensitivity 的值控制滚动行为，但如果使用以下代码，则可以使用“排序”事件在拖动时无条件滚动：
$(".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);
}
});
Not sure if this completely addresses the issue you're seeing, but I found that usability with larger list improves with this approach. Here is a link to jsfiddle.
回答by Saram
I think that you can consider handling scrolling external to sortable. I suggest to use timer and 'out' event of sortable.
我认为您可以考虑将外部滚动处理为可排序的。我建议使用计时器和可排序的“退出”事件。
Here is piece of code based on jQueryUI demo page, you can use it as start point, if want to go this way:
下面是一段基于 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();
});
Here is also working example: JSBIN
这也是工作示例：JSBIN
sorry
I did not lock example code and was destroyed incidentally. Now it's back to work.
抱歉，
我没有锁定示例代码并被意外销毁。现在它恢复工作了。
回答by Daniel
I have removed overflow-y: scrollfrom bodyto resolve it.
我已删除overflow-y: scroll的body解决这个问题。
回答by Esteban Higuita Duarte
I had a responsive table with bootstrap, this would not let it work.
我有一个带引导程序的响应式表，这不会让它工作。
not like this:
不是这样的：
<div class="table-responsive">
<table>
...
</table>
</div>
like this yes:
像这样是的：
<table>
...
</table>
and use these options:
并使用这些选项：
回答by Joshua Pinter
Scroll window when an item is dragged close to the top or bottom.
当项目靠近顶部或底部时滚动窗口。
I could not get any of the other answers working. Using Chrome and a sortable grid that needs to scroll vertically when an item is being dragged to the top or bottom edge of the window.
我无法得到任何其他答案的工作。使用 Chrome 和可排序的网格，当项目被拖动到窗口的顶部或底部边缘时，需要垂直滚动。
NOTE: This only works for scrolling the entire window. This will not work if you have a scrollable section inside of the window and need to scroll that.
注意：这仅适用于滚动整个窗口。如果您在窗口中有一个可滚动的部分并且需要滚动它，这将不起作用。
I was able to get the following working flawlessly:
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 Version
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 )
回答by TBE
Based on @marty 's answer, here is a fine tuned code that will: 1. Control speed of the scrolling 2. Will scroll down and scroll up without glitches. 3. Default speed is 7px at a time 4. movements of less than 7px will be ignored
根据@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);
}
});
回答by jonathanatx
You can trigger events based on the position returned by mouseMove. Here's a simple tutorial: http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html
您可以根据 mouseMove 返回的位置触发事件。这是一个简单的教程：http: //jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html
This tutorial might help you get started: http://valums.com/vertical-scrolling-menu/And this walks through the same effect: http://www.queness.com/resources/html/scrollmenu/index.html
本教程可能会帮助您入门：http: //valums.com/vertical-scrolling-menu/这会带来相同的效果：http: //www.queness.com/resources/html/scrollmenu/index.html
