我有两个未排序的列表, float 在一起。可以将右侧列表中的项目拖至左侧列表。
<ul class="static sortable connected-sortable">
<li class="not-sortable">Item 1<div class="hint">Sleep hier uw bestand</div></li>
<li class="not-sortable">Item 2<div class="hint">Sleep hier uw bestand</div></li>
<li class="not-sortable">Item 3<div class="hint">Sleep hier uw bestand</div></li>
<li class="not-sortable">Item 4<div class="hint">Sleep hier uw bestand</div></li>
<li class="not-sortable">Item 5<div class="hint">Sleep hier uw bestand</div></li>
<li class="not-sortable">Item 6<div class="hint">Sleep hier uw bestand</div></li>
</ul>
<ul class="sortable connected-sortable right">
<li class="sortableRow">Item sortable 1</li>
<li class="sortableRow">Item sortable 2</li>
<li class="sortableRow">Item sortable 3</li>
<li class="sortableRow">Item sortable 4</li>
<li class="sortableRow">Item sortable 5</li>
<li class="sortableRow">Item sortable 6</li>
</ul>
我的左侧列表有一个滚动条。
当我将项目从右侧列表拖动到左侧列表时,我想启用该左侧列表的滚动。因此,当我在左侧列表的底部或顶部边缘附近拖动时,左侧列表上的滚动条会向下或向上移动。
问题是滚动功能仅对原始列表(项目来自的列表)启用,目前根本没有滚动条。
拖动时,我希望将滚动功能应用于目标列表,即左侧的列表。
摆弄我的代码: http://jsfiddle.net/Y2RJj/42/
当我从右向左拖动项目时,如何激活左侧列表的滚动?
最佳答案
更新
由于排序事件仅在用户移动鼠标时触发,因此您应该使用一个每隔 n 毫秒检查助手位置的函数,如下所示:
var timerId = 0;
function testPos (l , h){
timerId = window.setInterval(function(){
var leftUl = l
var ulTop = leftUl.offset().top;
var ulBottom = ulTop + leftUl.height();
console.log(h.offset().top >= ulTop && h.offset().top <= ulTop + 20)
if(h.offset().top >= ulTop && h.offset().top <= ulTop + 20 ){
leftUl.scrollTop(leftUl.scrollTop() - 1)
}
if(h.offset().top +h.height() <= ulBottom && h.offset().top +h.height() >= ulBottom - 20 ){
leftUl.scrollTop(leftUl.scrollTop() + 1)
}
}, 10);
}
并在开始时启动计时器并在停止时清除Interval
start : function (event , ui){
testPos ($('ul.static.sortable.connected-sortable') , ui.helper);
},
stop: function( event, ui ) {
clearInterval(timerId)
ui.item.prev().children(".hint").hide();
var nextItemclass = ui.item.next().attr("class");
var prevItemClass = ui.item.prev().attr("class");
if ((nextItemclass == "sortableRow")&&(ui.item.parent().hasClass('static'))){
$(".right").append(ui.item.next());
}
if ((prevItemClass == "sortableRow")&&(ui.item.parent().hasClass('static'))){
$(".right").append(ui.item.prev());
}
if(prevItemClass == "not-sortable"){
ui.item.prev().addClass("highlight");
}
},
您可以通过排序事件来做到这一点
sort : function( event, ui ){
var leftUl = $('ul.static.sortable.connected-sortable')
var ulTop = leftUl.offset().top;
var ulBottom = ulTop + leftUl.height();
if(ui.offset.top >= ulTop && ui.offset.top <= ulTop + 20 ){
leftUl.scrollTop(leftUl.scrollTop() - 1)
}
if(ui.offset.top +ui.helper.height() <= ulBottom && ui.offset.top +ui.helper.height() >= ulBottom - 20 ){
leftUl.scrollTop(leftUl.scrollTop() + 1)
}
}
关于jquery - 如何在拖动目标元素时启用滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20266458/