jQuery UI Sortable - 多连接列表拖动

Question

Using jQuery UI Sortable, there is an option to have the sortable item container scroll when an item is dragged .

I have multiple sortable lists connected in separate containers with max heights and overflow scrolls:

<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>

I need to be able to scroll each container when items are dragged between them.

Currently, dragging only scrolls the parent container - we need it to be able to scroll connected list containers.

See this codepen for basic setup: http://codepen.io/typ90/pen/pymOdV

I've tried using the helper option on sortable to clone the item and append to other containers as it's dragged around with no luck.

Any ideas?

Answer 1

Just add the code below to your sortable configuration section:

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

It will be like that:

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

Answer 2

Solution with helper and clone

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

in my case the use of only option "clone" was not possible because of z-index issue with sort element.

credit goes to https://stackoverflow.com/users/2117156/jamie-barker

Answer 3

The accepted answer was not the solution in my case with the same problem as the OP. I was getting errors with the accepted answer.

However, it was very close. I simply needed to check that ui.sender was a truthy value.

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