Làm cách nào để bật cuộn khi kéo trên phần tử mục tiêu?

Question

Tôi có 2 danh sách chưa được phân loại, thả nổi cùng nhau. Các mục từ danh sách bên phải có thể được kéo vào danh sách bên trái.

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

Danh sách trái của tôi có thanh cuộn.

Khi tôi kéo các mục từ danh sách bên phải vào danh sách bên trái, tôi muốn bật cuộn cho danh sách bên trái này. Vì vậy, khi tôi kéo gần cạnh dưới cùng hoặc trên cùng của danh sách bên trái, thanh cuộn trên danh sách bên trái sẽ chuyển xuống hoặc xuống.

Sự cố là chức năng cuộn chỉ được bật cho danh sách gốc, danh sách có mục đến từ đó, hiện tại không có thanh cuộn.

Khi kéo, tôi muốn chức năng cuộn được áp dụng cho danh sách đích, ở bên trái.

Một fiddle với mã của tôi: http://jsfiddle.net/Y2RJj/42/

Làm thế nào để kích hoạt di chuyển để xem danh sách bên trái khi tôi đang kéo một mục từ phải sang trái?

Answer 1

CẬP NHẬT

kể từ khi sự kiện loại chỉ cháy khi người dùng di chuyển chuột của mình bạn nên sử dụng một hàm người kiểm tra vị trí của helper mỗi n mili giây như thế này:

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

} 

và bắt đầu hẹn giờ khi bắt đầu và clearInterval trên dừng

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"); 
        } 
       }, 

Bạn có thể làm điều này với sự kiện loại

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