我想让JQuery Sortable工作,但我遇到了轻微的可用性问题。JQuery可排序和自动滚动
我想排序的列表非常大(约200项)。如果用户尝试将顶部项目拖动到底部,则一旦该项目到达屏幕可见部分的底部,该页面将滚动一小部分,然后停止。要触发更多的向下滚动,您必须将鼠标以圆形运动移动,直到物品到达底部。
是否有任何方法来跟踪鼠标的位置,而它拖动一个项目并自动向下滚动屏幕?
我想让JQuery Sortable工作,但我遇到了轻微的可用性问题。JQuery可排序和自动滚动
我想排序的列表非常大(约200项)。如果用户尝试将顶部项目拖动到底部,则一旦该项目到达屏幕可见部分的底部,该页面将滚动一小部分,然后停止。要触发更多的向下滚动,您必须将鼠标以圆形运动移动,直到物品到达底部。
是否有任何方法来跟踪鼠标的位置,而它拖动一个项目并自动向下滚动屏幕?
您可以根据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
我想借此看看scroll, scrollSensativity, and scrollSpeed options。
你可以这样做:
$("#sort").sortable({ scroll: true, scrollSensitivity: 100 });
或
$("#sort").sortable({ scroll: true, scrollSpeed: 100 });
甚至
$("#sort").sortable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 100 });
我觉得你可以考虑处理滚动外部排序。我建议使用计时器和可排序的'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
对不起
我没有锁定示例代码,并偶然被破坏。现在它恢复了工作。
虽然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);
}
});
不知道这是否完全解决了您所看到的问题,但我发现使用此方法可以提高可用性。 这里是link to jsfiddle。
我已经从body
中删除了overflow-y: scroll
来解决它。
它以某种方式帮助我!谢谢 – 2016-07-29 08:29:25
我有一个自举的响应表,这不会让它工作。
不喜欢这样的:
<div class="table-responsive">
<table>
...
</table>
</div>
这样是:
<table>
...
</table>
,并使用这些选项:
乙通过@marty的回答,这是一个很好的调整代码: 1.滚动的控制速度 2.将向下滚动并向上滚动而没有毛刺。 3.默认速度是7px的同时小于7px的 4.运动将被忽略
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);
}
});
的感谢!它完美地工作 – Steffi 2014-07-28 10:01:55
这个答案没有解决问题中实际需要的内容。 – Borgboy 2017-02-22 00:23:25