jQuery UI Sortable - Multi Connected List Drag

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