javascript – jQuery UI可排序 – 多连接列表拖动

2023年6月26日 243次阅读

使用jQuery UI Sortable,
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>

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

目前,拖动只滚动父容器 – 我们需要它能够滚动连接的列表容器.

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

我已经尝试在sortable上使用helper选项来克隆项目并附加到其他容器,因为它被拖动而没有运气.

有任何想法吗？

最佳答案 只需将以下代码添加到可排序配置部分：

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