Question

使用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选项来克隆该项目并附加到其他容器，因为它被拖动而没有运气。

有什么想法吗？

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

Answer 2

有助手和克隆的解决方案

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

在我的情况下，由于sort元素的z-index问题，因此无法使用选项“clone”。

信用额转到https://stackoverflow.com/users/2117156/jamie-barker

Answer 3

在我的情况下，所接受的答案不是与OP相同的解决方案。我在接受的答案上遇到了错误。

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

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

jQuery UI Sortable - 多连接列表拖动

3 个答案: