如何在拖动目标元素时启用滚动？

Question

我有2个未分类的列表,一起浮动.右侧列表中的项目可以拖动到左侧列表中.

<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/

当我从右向左拖动项目时,如何激活左侧列表的滚动？

Answer 1

更新

由于排序事件仅在用户移动鼠标时触发，因此您应该使用每隔 n 毫秒检查助手位置的函数，如下所示：

编辑 jsFiddle

 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)
                }

            }

jsFiddle