Angular Drag and Drop Between Multiple Connected Lists

Learn how to implement drag and drop between multiple lists in Angular. This example demonstrates how sortable lists can be connected to each other, allowing seamless item transfer across different containers.

Note the sortable CSS class (provides min-height) so the lists never collapse when empty, maintaining a consistent drag-and-drop experience.

Transfer Items Between Lists Example

These lists are connected using the group option. You can drag and drop elements across different lists, making it perfect for kanban boards, task managers, and categorization interfaces.

and the actual state is

Clone items

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

and the actual state is

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

and the actual state is