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.

Element {{ item }}

Element {{ item }}

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.

Element {{ item }}

Element {{ item }}

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

Element {{ item }}

2. This is a normal list

Element {{ item }}

3. This list clones its children

Element {{ item }}

4. Only #1 can put here

Element {{ item }}

and the actual state is

> {{ list1 | json }}

> {{ list2 | json }}

> {{ list3 | json }}

> {{ list4 | json }}