Angular Sortablejs directive

Basic usage

This examples shows various elements that can be sortable. They share the same model, so reordering elements in one container propagates to all other containers in the example.

Sortable FormArray

Most of the time one wants to sort something more than just data. Complex form inputs with FormArray controls are also supported.

Disabled options

Events

Binding to the events is easy. Any even could be attached as a property of Sortablejs. The example below binds to the onUpdate event. Drag the items and track the amount of updates.

Scrolling options

Most browsers automatically scroll content as you drag items to the edge of the screen. If the default behaviour doesn't work for you, Sortablejs provides an option to cofigure scrolling.

Transfer between lists

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

Clone items

The first list is a clone factory, and the second list can be its target.

Complex example

Each list can have different options and restrictions.

Union example

The list items can be of different types (the element type can be a union type).

Table items

Table rows are nested inside tbody, and require the container selector to be set accordingly.