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

我对jQueryUISortable有一个奇怪的问题。在我的示例中，我有多个列，每个列中都有多个可排序的项

我想在任何列中拖放，在一列中排序没有问题

我有两个问题：

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

看我的例子

---

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

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

对不起，我把你的代码改了一点，因为这样比较容易跟踪

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

请参阅更新的小提琴：

$（'li'）.addClass（'item'）；
变量y；
var-og；
变量n，nB，一半；
$（“.connectedSortable”）.sortable({
光标：“移动”，
占位符：“突出显示”，
真的，
connectWith:“.connectedSortable”，
遏制：“身体”，
项目：'.item'，
开始：功能（事件、用户界面）{
og=$（this）.closest（'.connectedSortable'）；
},
结束：功能（事件、用户界面）{
n=$（this）.closest（'.connectedSortable'）；
nB=n.外部高度（真）+n.位置（）.顶部；
半数=nB/2；
},
排序：函数（事件、用户界面）{
控制台日志（一半）；
如果（n.attr（'id'）！=og.attr（'id'））{
og.sortable（“选项”，“滚动”，false）；
如果（event.pageY>half）{
n、 scrollTop（n.scrollTop（）+5）；
}否则如果（event.pageY

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

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

对不起，我把你的代码改了一点，因为这样比较容易跟踪

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

请参阅更新的小提琴：

$（'li'）.addClass（'item'）；
变量y；
var-og；
变量n，nB，一半；
$（“.connectedSortable”）.sortable({
光标：“移动”，
占位符：“突出显示”，
真的，
connectWith:“.connectedSortable”，
遏制：“身体”，
项目：'.item'，
开始：功能（事件、用户界面）{
og=$（this）.closest（'.connectedSortable'）；
},
结束：功能（事件、用户界面）{
n=$（this）.closest（'.connectedSortable'）；
nB=n.外部高度（真）+n.位置（）.顶部；
半数=nB/2；
},
排序：函数（事件、用户界面）{
控制台日志（一半）；
如果（n.attr（'id'）！=og.attr（'id'））{
og.sortable（“选项”，“滚动”，false）；
如果（event.pageY>half）{
n、 scrollTop（n.scrollTop（）+5）；
}否则如果（event.pageY

当我像这样删除“最大高度”和“溢出”时，它就起作用了。但我只想在每一列中有一个卷轴。如何存档？请帮助我理解，当您在列表上拖动可排序项时，您希望能够使用该元素向下滚动该列表，对吗？是的，正如您在我的代码片段中看到的，当拖动可排序项时，我无法向下滚动列底部。我也不能把它拖到最右边。我想知道是否有一种本地方式可以做到这一点，或者我必须用“sort or change function callback”（排序或更改函数回调）来实现这一点。您也可以使用“over”（结束）可排序函数来实现这一点，我认为问题在于，从技术上讲，可排序项仍然位于原始的可排序列表中，这就是它滚动的地方。当我删除max height和overflow时，它就开始工作了。但我只想在每一列中有一个卷轴。如何存档？请帮助我理解，当您在列表上拖动可排序项时，您希望能够使用该元素向下滚动该列表，对吗？是的，正如您在我的代码片段中看到的，当拖动可排序项时，我无法向下滚动列底部。我也不能把它拖到最右边。我想知道是否有一种本地方法可以做到这一点，或者我必须用“sort or change function callback”（排序或更改函数回调）来实现这一点。您也可以使用“over”（结束）可排序函数来实现这一点，我认为问题在于，从技术上讲，可排序项仍然位于原始的可排序列表中，因此它正在滚动。

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



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

$('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 );
    }
  }
});