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

更新

因为sort事件只在用户移动鼠标时触发，你应该使用一个函数来检查帮助器的位置，每隔n毫秒，如下所示：

edited 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);

}

并在启动时启动计时器并在停止时启动clearInterval

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事件

执行此操作

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

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

1 个答案: