Angular Drag and Drop with Simple Arrays

View code

Learn how to implement drag and drop functionality with simple arrays in Angular using SortableJS. The examples below show several Bootstrap elements that can be made sortable.

They share the same data model, so any drag/drop interaction updates all the blocks in real-time. In practice, any HTML element can be made sortable with Angular.

Sortable Button Groups Example

Cards

Ankara
Ankara description
Moscow
Moscow description
Munich
Munich description
Paris
Paris description
Washington
Washington description

Navigation

The actual model

> [ "Ankara", "Moscow", "Munich", "Paris", "Washington" ]