Geek Answers Handbook

JQuery UI Sortable - Multi Connected List Drag

Using jQuery UI Sortable, it is possible to scroll through a sortable container of items while dragging an item .

I have several sort lists connected in separate containers with maximum heights and overflows:

<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 through each container when items are being dragged between them.

Currently, drag and drop only the scroll of the parent container - we need it so that it can scroll through the connected list containers.

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

helper , .

?

+4
2

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

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

"clone" - z-index sort.

https://stackoverflow.com/users/2117156/jamie-barker

0

More articles:


All Articles