jQuery UI Draggable：拖动其他列表时滚动它们答案

【问题标题】：jQuery UI Draggable: Scroll other lists when dragging over themjQuery UI Draggable：拖动其他列表时滚动它们
【发布时间】：2019-06-17 03:37:21
【问题描述】：

我对 jQuery ui-sortable 有一个奇怪的问题。在我的示例中，我有多个列，并且在每一列中我有多个可排序的项目。

我想在任意列中拖拽，在一列内排序没问题。

我有两个问题：

从一列拖到另一列时，我需要目标列自动滚动到底部。
水平滚动不会自动滚动最右侧的列。

看我的例子 https://jsfiddle.net/maidanhcongtu/9ws2unLa/11/

var configuration2 = {
        cursor : 'move',
        placeholder : 'highlight',
        dropOnEmpty : true,
        connectWith : ".connectedSortable",
        containment : "body",
    };



    $(".connectedSortable").sortable(configuration2).disableSelection();

【问题讨论】：

当我删除最大高度并像这样jsfiddle.net/maidanhcongtu/9ws2unLa/10 溢出时，它正在工作。但我只想在每一列中滚动。我怎样才能存档呢？。
帮助我理解，当您将可排序项目拖到列表上时，您希望能够使用该元素向下滚动该列表，对吗？
是的，正如您在我的 sn-p 代码中看到的那样，当拖动可排序项目时，我无法在列底部向下滚动。而且我也无法将项目拖到最右侧。我想知道是否有一种本地方法可以做到这一点，或者我必须通过“排序或更改函数回调”来做我自己
您也可以使用“over”可排序功能来做到这一点，我认为问题在于可排序项目在技术上仍在原始可排序列表中，因此它是滚动的.

标签： css jquery-ui-sortable

【解决方案1】：

好的，我找到了一个解决方案，当您不再在原始父项中排序时禁用滚动，以便可排序项在拖动到另一个可排序项时不会滚动父项。

我还制作了您要排序的可排序列表，自动滚动到底部。

抱歉，我稍微修改了你的代码，因为这样我更容易跟踪事情。

另外，我在每个可排序列表中添加了 ID。

查看更新的小提琴：https://jsfiddle.net/Souleste/ktxeu35p/46/

$('li').addClass('item');
var y;
var og;
var n, nB, half;
$(".connectedSortable").sortable({
  cursor : 'move',
  placeholder : 'highlight',
  dropOnEmpty : true,
  connectWith : ".connectedSortable",
  containment : "body",
  items: '.item',
  start: function(event,ui) {
    og = $(this).closest('.connectedSortable');
  },
  over: function(event,ui) {
    n = $(this).closest('.connectedSortable');
    nB = n.outerHeight(true) + n.position().top;
    half = nB / 2;
  },
  sort: function(event,ui) {
  console.log(half);
    if ( n.attr('id') != og.attr('id') ) {
        og.sortable( "option", "scroll", false );
      if (event.pageY > half) {
        n.scrollTop(n.scrollTop() + 5);
      } else if (event.pageY < half) {
        n.scrollTop(n.scrollTop() - 5);
      }
    } else {
        og.sortable( "option", "scroll", true );
    }
  }
});

【讨论】：