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。

请参阅更新的小提琴：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 );
    }
  }
});

jQuery UI Draggable：在其他列表上拖动时滚动它们

1 个答案: