Visión General

Por qué los equipos buscan esta librería

Elige esta librería sortable para Angular cuando necesites ordenación drag and drop que funcione con arrays, formularios reactivos, Signals y builders complejos de interfaz.

Instalación

npm install ng-hub-ui-sortable

Ir a

Ideal para

ordenación de tareas
editores con FormArray
builders de layout
gestión de prioridades

Sobre sortable

ng-hub-ui-sortable ayuda a los equipos Angular a reordenar datos de forma natural en productos donde el orden importa: tareas, prioridades, builders de layout o bloques dinámicos de formularios. Resulta especialmente útil cuando necesitas drag and drop sin perder el control sobre las actualizaciones de estado.

Guías de uso

Uso principal

Escenarios básicos de uso para listas sortable.

Ejemplos:

Array simple

Reordena arrays simples.

Button groups

Cards

Ankara

Ankara description

Moscow

Moscow description

Munich

Munich description

Paris

Paris description

Washington

Washington description

Navigation

Current model

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

Código

Signals

Vincula datos sortable a señales mutables de Angular.

Angularv18
Reactv19
Vuev3
Sveltev5

Current signal value:

[
  "Angular",
  "React",
  "Vue",
  "Svelte"
]

Código

Integración con formularios

Usa sortable con formularios reactivos de Angular.

Ejemplos:

Integración con FormArray

Reordena controles FormArray con drag and drop.

Current FormArray value:

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

Código

Configuración avanzada

Personaliza el comportamiento y las interacciones de SortableJS.

Ejemplos:

Opciones personalizadas

Configura handles, filtros, animación y eventos.

Filtered (disabled) items

Element 1
Element 2
Element 3
Element 4
Element 5

[
  "1",
  "2",
  "3",
  "4",
  "5"
]

Events

Updated 0 times

Element 1
Element 2
Element 3
Element 4
Element 5

Autoscroll

Drag near the edges of the list to trigger autoscroll.

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Element 11
Element 12
Element 13
Element 14
Element 15
Element 16
Element 17
Element 18
Element 19
Element 20
Element 21
Element 22
Element 23
Element 24
Element 25
Element 26
Element 27
Element 28
Element 29
Element 30

Código

Múltiples listas

Conecta listas, clona elementos y controla reglas de transferencia.

Transfer between lists

Element 1
Element 2
Element 3
Element 4
Element 5

[
  "1",
  "2",
  "3",
  "4",
  "5"
]

Element 6
Element 7
Element 8
Element 9
Element 10

[
  "6",
  "7",
  "8",
  "9",
  "10"
]

Clone items

List 1 is a clone factory; list 2 is its target.

Element 1
Element 2
Element 3
Element 4
Element 5

Element 6
Element 7
Element 8
Element 9
Element 10

Constrained groups

1. Cannot accept items

Element 1
Element 2
Element 3
Element 4
Element 5

2. Normal list

Element 6
Element 7
Element 8
Element 9
Element 10

3. Clones children

Element 11
Element 12

4. Only #1 can drop here

Element 13

Código

Constructor de layout

Contenedores sortable anidados con tabs y widgets.

Build advanced visual layout builders with nested drag and drop in Angular. This powerful example demonstrates nested sortable lists with drag handles and component slots, perfect for creating page builders and dashboard designers.

Create hierarchical structures with drag-and-drop functionality—ideal for layout builders, dashboard organizers, and visual editors. Supports multi-level nesting with full control over handles and constraints.

Demo: Generic, Tabs & Widgets

Generic A

Widget 1

Widget 2

Tabs Container

Tab 1

Tab 2

Generic B

Widget 3

Generic C

Generic D

Widget 4

Generic E

Move log

No events yet.

Código

Modo manual

Desactiva las actualizaciones automáticas con `autoUpdateArray=false` y aplica los cambios tú mismo con los helpers `moveItemInArray`, `transferArrayItem` y `copyArrayItem`.

Manual Control Mode

This example demonstrates manual array control by setting [autoUpdateArray]="false". This gives you complete control over when and how arrays are updated, similar to Angular CDK's approach.

Benefits: Perform validation, make API calls, implement undo/redo, or use immutable patterns before updating your data.

Single List - Manual Reordering

Drag and drop tasks to reorder them. Notice how we manually update the array using the moveItemInArray helper function.

Task List

Design UI mockups
Implement authentication
Write unit tests
Deploy to production

Current State:

[
  {
    "id": 1,
    "title": "Design UI mockups",
    "completed": false
  },
  {
    "id": 2,
    "title": "Implement authentication",
    "completed": false
  },
  {
    "id": 3,
    "title": "Write unit tests",
    "completed": false
  },
  {
    "id": 4,
    "title": "Deploy to production",
    "completed": false
  }
]

Multiple Lists - Kanban Board Style

Drag tasks between different status columns. The transferArrayItem helper makes it easy to move items between arrays while maintaining full control.

To Do 3

Review pull requests
Priority: high
Update documentation
Priority: medium
Refactor legacy code
Priority: low

In Progress 2

Fix bug #123
Priority: high
Add new feature
Priority: medium

Done 1

Initial setup
Priority: high

Operations Log

No operations yet. Start dragging items to see the log!

Code Example

Component Handler

import { moveItemInArray, transferArrayItem } from 'ng-hub-ui-sortable';

onTasksUpdate(event: SortableEvent): void {
  // Manually update the array with full control
  moveItemInArray(this.tasks, event.oldIndex, event.newIndex);
  
  // You can add validation, API calls, etc. here
  console.log('Task reordered!');
}

onListAdd(event: SortableEvent, targetList: any[], listName: string): void {
  const sourceList = this.getListByElement(event.from);
  
  // Transfer item between arrays
  transferArrayItem(sourceList, targetList, event.oldIndex, event.newIndex);
  
  // Perfect place for API calls to persist the change
  this.apiService.updateTaskStatus(item.id, listName);
}

Why Use Manual Control?

Validation

Validate changes before updating your data model. Prevent invalid operations or apply business rules.

API Integration

Make API calls to persist changes immediately. Handle success/error responses appropriately.

Undo/Redo

Implement undo/redo functionality by maintaining operation history before committing changes.

Immutability

Use immutable data patterns with OnPush change detection for optimal performance.

Código

Características clave

Cambios recientes

Version 22.1.0 - 6/29/26, 12:00 AM

added: `provideSortable()` standalone provider function to register global SortableJS options without `SortableModule`.

added: Public type exports for the directive payloads (`SortableData`, `SortableEventName`, `SortableMoveEventPayload`).

deprecated: `SortableModule` and `SortableModule.forRoot()` — import the standalone `SortableDirective` and use `provideSortable()` instead.

changed: Aligned package scaffolding and documentation with the rest of the ng-hub-ui ecosystem.

Version 22.0.0 - 6/17/26, 12:00 AM

changed: Rebranded the package and standardized its metadata and README to match the ng-hub-ui family.

Version 21.2.0 - 2/10/26, 12:00 AM

added: Manual control mode via the `autoUpdateArray` input (default `true`); set it to `false` to emit events without mutating the bound array.

added: Array helper functions `moveItemInArray`, `transferArrayItem` and `copyArrayItem` for manual array manipulation.

added: Re-exported SortableJS types (`SortableEvent`, `Options`, `MoveEvent`, `GroupOptions`, `Sortable`) from the library root.

changed: Moved `sortablejs` from peer dependencies to dependencies so it installs automatically.

fixed: Prevented duplicate `update`/`add` events from firing for a single drag operation in manual control mode.

Version 21.0.1 - 12/10/25, 12:00 AM

added: Initial ng-hub-ui release: directive-based SortableJS bindings for arrays, FormArray and Signals.

Librerías relacionadas

ng-hub-ui-paginable ng-hub-ui-board ng-hub-ui-history

Visión General

Por qué los equipos buscan esta librería

Instalación

Ir a

Ideal para

Sobre sortable

Guías de uso

Uso principal

Ejemplos:

Array simple

Button groups

Cards

Navigation

Current model

Código

Signals

Código

Integración con formularios

Ejemplos:

Integración con FormArray

Código

Configuración avanzada

Ejemplos:

Opciones personalizadas

Filtered (disabled) items

Events

Autoscroll

Código

Múltiples listas

Transfer between lists

Clone items

Constrained groups

Código

Constructor de layout

Demo: Generic, Tabs & Widgets

Código

Modo manual

Manual Control Mode

Single List - Manual Reordering

Current State:

Multiple Lists - Kanban Board Style

Operations Log

Code Example

Why Use Manual Control?

Validation

API Integration

Undo/Redo

Immutability

Código

Características clave

Ordenación de arrays y listas

Funciona con FormArray

Flujos drag-and-drop conectados

Cambios recientes

Version 22.1.0 - 6/29/26, 12:00 AM

Version 22.0.0 - 6/17/26, 12:00 AM

Version 21.2.0 - 2/10/26, 12:00 AM

Version 21.0.1 - 12/10/25, 12:00 AM

Librerías relacionadas

Version 22.1.0 - 6/29/26, 12:00 AM

Version 22.0.0 - 6/17/26, 12:00 AM

Version 21.2.0 - 2/10/26, 12:00 AM

Version 21.0.1 - 12/10/25, 12:00 AM