The key point is :
- call
.sortable()
on newly created divs (I imagine you figured out this much ...), - call
.sortable('refresh')
on the existing ones, to make them aware of the new guys.
You can add empty divs between your columns, and use .droppable()
:
<div class="sortable">
<div class="item" id="1"></div>
<div class="item" id="2"></div>
</div>
<div class="droppable">
</div>
<div class="sortable">
<div class="item" id="3"></div>
<div class="item" id="4"></div>
<div class="item" id="5"></div>
</div>
$('.droppable').droppable({
accept: ".item",
drop: function(e, ui) {
//insert a new sortable list in the dom
//stick the item inside this list
//update the setup :
// - $(new list).sortable(...);
// make the existing lists aware of the new list :
// - $(all sortables).sortable('refresh');
}
});
See this sortable example (interaction with a droppable), and the documentation for droppable
You could do a similar thing using only sortable
s, as you did :
- in base html, or in javascript setup, insert an empty sortable div between each pair of starting div,
- every time an item is dropped, check the resultaing layout, and fix up the alternance
non-empty
/empty
/non-empty
/... , - don't forget to call
.sortable()
on newly created divs, and.sortable('refresh')
on the existing ones.
FWIW, I find it clearer to separate the two roles existing, sortable list
/ empty droppable placeholder