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 的顶部或底部以找到用户想要放置项目的 droppable 时，div 应该滚动。

这是小提琴的截图：

顶部和底部的深灰色区域是可悬停的 div，它们会导致向上或向下滚动。每个“drop here”都是一个 droppable。

有人见过这样的吗？

此外，读者知道，还有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。如果您还想左右滚动，也可以在over 中使用left。

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