javascript - jQuery UI Sortable - 多连接列表拖动

Question

使用 jQuery UI 可排序，there is an option to have the sortable item container scroll when an item is dragged .

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

<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 上的辅助选项来克隆该元素并附加到其他容器，因为它被拖来拖去，但没有成功。

有什么想法吗？

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)
  }
});