jQuery UI可拖动到可滚动的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。基本上，您可以放入溢出区域中的droppables。

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中使用over。

很多选择。希望这会有所帮助。