jQuery用戶界面可拖動到可滾動的div

Question

我發現了一個我正在尋找的解決方案，但它使用的庫不再與最新的jQuery UI保持一致。這裏的例子：http://jsfiddle.net/crowjonah/Fr7u8/2/（該解決方案是從similar question from nearly 5 yrs ago）

從本質上講，我希望能夠拖動一個jQuery UI拖動到一個div是可滾動（上有overflow-y:scroll集）。同樣，當用戶將鼠標懸停在div的頂部或底部以查找用戶想要放置項目的可放置區域時，div應該滾動。

這裏是小提琴的截圖：

黑暗的頂部和底部的灰色區域是懸停能力的div引起向上或向下滾動。每個「放在這裏」都是可以放棄的。

有沒有人看過類似的東西？

此外，所以讀者都知道，有an issue if you drop an item below or above the scrollable area if items are down there。基本上，你可以放入溢出區域的可丟棄物。

Answer 1

這可以通過幾種方法完成。這是一個不需要任何外部庫和jQuery 3.2.1和jQuery UI 1.12.1設置。

的JavaScript

$(function() { 
    $('.drag_me').draggable({ 
    helper: 'clone', 
    scroll: 'true', 
    refreshPositions: true 
    }); 
    $('.drop_on_me').droppable({ 
    accept: '.drag_me', 
    activeClass: 'active', 
    hoverClass: 'hover', 
    tolerance: 'pointer', 
    over: function(e, ui) { 
     var buffer = 16; 
     var step = 30; 
     var speed = 250; 
     var upper = $('.drop_area').position().top + buffer; 
     var lower = $('.drop_area').position().top + $('.drop_area').height() - buffer; 
     var current = $('.drop_area').scrollTop(); 
     switch (true) { 
     case (ui.position.top <= upper): 
      console.log("Direction: Up"); 
      $('.drop_area').animate({ 
      scrollTop: current - step 
      }, speed); 
      break; 
     case ((ui.position.top + ui.helper.height()) >= lower): 
      console.log("Direction: Down"); 
      $('.drop_area').animate({ 
      scrollTop: current + step 
      }, speed); 
      break; 
     } 
    } 
    }); 
}); 

工作實例：http://jsfiddle.net/Twisty/rmq15a0w/7/

你提到的庫變得更圓滑，我懷疑這可能會得到改善，但它在功能上做了同樣的各種各樣的事情。如果您想要覆蓋額外的「速度」設置，我使用了switch()。例如，如果你有一個500件物品的清單。您可能需要upper-1和upper-2，其中如果用戶拖動到upper-1，它會移動滾動step * 2和upper-2只移動它在step。如果您還想向左或向右滾動，則還可以使用中的left。

很多選擇。希望這可以幫助。