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

jQuery UI Sortable - Multi Connected List Drag

本文关键字：连接 列表 拖动 UI 排序 jQuery      更新时间：2023-09-26

使用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选项来克隆项目并附加到其他容器，因为它被拖来拖去很不走运。

有什么想法吗？

只需将以下代码添加到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)
  }
});

具有助手和克隆的解决方案

$('.list').sortable({
  connectWith: '.list',
  placeholder: 'ui-state-highlight',
  helper: function (event, element) {
    return element.clone().appendTo($('.connectedSortable').not(element.parent()));
  }
});

在我的案例中，由于排序元素的z索引问题，无法使用only选项"clone"。

信贷流向https://stackoverflow.com/users/2117156/jamie-barker

在我遇到与OP相同问题的情况下，接受的答案不是解决方案。我在接受的答案中出现了错误。

然而，它非常接近。我只需要检查ui.sender是否是一个真实的值。

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