Connecting multiple sortable lists

The source code

This shows how the sortable lists can be connected together. Pay attention to the sortable CSS class (gives a min-height) that does not allow lists to become invisible when all items are gone

Transfer between lists

These lists are connected together. You can drag / drop elements across the lists.

and the actual state is

> {{ normalList1 | json }}
> {{ normalList2 | json }}

Clone items

The list 1 is a clone factory and list 2 can be its target.

and the actual state is

> {{ cloneList1 | json }}
> {{ cloneList2 | json }}

Super complicated example

These lists are connected together. You can drag / drop elements across the lists. Pay attention to the sortable CSS class (gives a min-height) that does not allow list to become invisible when all items are gone

1. This list cannot accept items
2. This is a normal list
3. This list clones its children
4. Only #1 can put here

and the actual state is

> {{ list1 | json }}
> {{ list2 | json }}
> {{ list3 | json }}
> {{ list4 | json }}