css - jQuery UI 可拖动 : Scroll other lists when dragging over them

Question

我对 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();

Answer 1

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

我还通过自动滚动到底部制作了您正在排序的可排序列表。

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

此外，我还为每个可排序列表添加了 ID。

查看更新的 fiddle :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 );
    }
  }
});