jQuery UI Sortable - 多连接列表拖动

Question

使用 jQuery UI Sortable，可以选择在拖动项目时让可排序项目容器滚动。

我有多个可排序列表连接在具有最大高度和溢出滚动的单独容器中：

<div class="list">
  <div class="item">A1</div>
  <div class="item">A2</div>
  <div class="item">A3</div>
  <div class="item">A4</div>
  <div class="item">A5</div>
</div>

<div class="list">
  <div class="item">B1</div>
  <div class="item">B2</div>
  <div class="item">B3</div>
  <div class="item">B4</div>
  <div class="item">B5</div>
</div>

当项目在它们之间拖动时，我需要能够滚动每个容器。

目前，拖动只滚动父容器 - 我们需要它能够滚动连接的列表容器。

有关基本设置，请参阅此代码笔：http ://codepen.io/typ90/pen/pymOdV

我已经尝试使用 sortable 上的 helper 选项来克隆项目并附加到其他容器，因为它被拖到了没有运气的地方。

有任何想法吗？

Answer 1

只需将以下代码添加到您的sortable配置部分：

over: function (e, ui) {
  $(ui.sender).sortable('instance').scrollParent = $(e.target)
}

会是这样的：

$('.list').sortable({
  items: '.item',
  connectWith: '.list',
  over: function (e, ui) {
    $(ui.sender).sortable('instance').scrollParent = $(e.target)
  }
});