SortableJS solved years ago the hard part of drag and drop: nested lists, moving items between connected lists, cloning instead of moving, and all the drag behaviour nobody wants to write by hand.

In Angular, the door to that power was, for a while, ngx-sortablejs. It worked, but its API stayed in December 2020, when it published its last version.

What it could do

ngx-sortablejs let all of SortableJS through, so you had nested lists, transfers between connected lists, a clone mode and the reordering of an Angular FormArray without losing the controls. Any SortableJS option was one object away.

Where it fell short

The API was the one from 2020:

• Four inputs: the array, the container, the options object and the clone function.
• A single output, the init one.
• The events, as callbacks inside the options object.
• No signals: they did not exist yet.

That has two consequences. The first, that the template fills up with an options object: you cannot bind animation or handle as an input, or listen to an (update) as an output. The second, that with Angular 16 the library stops compiling. It is built with View Engine, Angular stopped converting those libraries with ngcc in 16, and that is where it ends.

The modern version

ng-hub-ui-sortable is a replacement for current Angular. It keeps what SortableJS knows how to do and modernises the Angular layer:

• One input per option (32 in total) and one output per event, plus the options object if you prefer it.
• It binds to an array, a FormArray or a WritableSignal.
• A standalone provideSortable() provider for the global options.
• Keyboard reordering with screen-reader announcements, on by default. SortableJS only listens to the mouse and the finger.
• A manual mode along the lines of the CDK, to validate or save before touching the array.

An honest note: it is not a one-to-one replacement. Every template attribute changes name and several behaviours compile without complaining and fail at runtime. The migration guide walks them one by one.

Where it comes from

It is the fork of a fork. The original project died in 2020; Worktile kept it alive shipping a version per Angular, with the same API; and ng-hub-ui-sortable starts from that work to bring the API to the Angular of today. If all you need is to keep moving versions without touching your templates, the Worktile one is the short path.

For non-programmers: a library that solves something as tedious as drag and drop in complex interfaces was still working fine, but the way you used it had grown old. Updating it does not change what it does; it changes how comfortable it is to do it from Angular.