Referencia API

Aquí tienes el contrato completo de sortable: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta sortable a tu gusto con 13 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`hubSortable`Obligatorio	`T[] \| FormArray \| WritableSignal<T[]>`	—	Datos enlazados al contenedor ordenable: un array, un `FormArray` reactivo o una signal escribible. Se mantiene sincronizado con las operaciones de arrastrar y soltar.
`options`	`Options`	—	Objeto completo de opciones de SortableJS. Cada opción de SortableJS también puede enlazarse directamente como su propio input (por ejemplo `handle`, `animation` o `group`).
`autoUpdateArray`	`boolean`	`true`	Con `true` (por defecto) la directiva muta el array enlazado automáticamente tras cada arrastre. Ponlo a `false` para control manual y actualiza tú mismo el array.
`cloneFunction`	`(item: T) => T`	—	Función usada para clonar un elemento cuando el grupo está configurado en modo `pull: 'clone'`.
`container`	`string`	—	Selector CSS del elemento anidado que debe volverse ordenable cuando el host envuelve la lista real.
`group`	`Options['group']`	—	Nombre u objeto de configuración del grupo para conectar varias listas y controlar cuáles pueden ceder o recibir elementos.
`sort`	`boolean`	—	Habilita o deshabilita el reordenamiento de elementos dentro de la lista.
`handle`	`string`	—	Selector CSS del elemento dentro de cada ítem que inicia el arrastre, dejando interactivo el resto.
`draggable`	`string`	—	Selector CSS que restringe qué elementos hijos pueden arrastrarse.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	Selector CSS (o predicado) que marca los elementos que no pueden arrastrarse.
`disabled`	`boolean`	—	Deshabilita el comportamiento ordenable sin retirar la directiva.
`animation`	`number`	—	Duración en milisegundos de la animación de reordenamiento.
`ghostClass`	`string`	—	Clase CSS aplicada al marcador de posición que se muestra durante el arrastre.

Outputs

Reacciona a lo que hace sortable: 13 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`init`	`Sortable`	Se emite una vez creada la instancia subyacente de SortableJS.
`start`	`SortableEvent`	Se emite cuando comienza una operación de arrastre.
`end`	`SortableEvent`	Se emite cuando termina una operación de arrastre, sea cual sea el resultado.
`add`	`SortableEvent`	Se emite cuando se suelta un elemento en esta lista procedente de otra.
`update`	`SortableEvent`	Se emite cuando un elemento cambia de posición dentro de la misma lista.
`sortEvent`	`SortableEvent`	Se emite cada vez que cambia el orden de la lista (tras `add` o `update`).
`remove`	`SortableEvent`	Se emite cuando un elemento sale de esta lista hacia otra.
`filterEvent`	`SortableEvent`	Se emite al intentar arrastrar un elemento filtrado (no arrastrable).
`change`	`SortableEvent`	Se emite cuando la lista cambia por una operación de adición o eliminación.
`choose`	`SortableEvent`	Se emite cuando se elige un elemento (al pulsar el puntero).
`unchoose`	`SortableEvent`	Se emite cuando se suelta un elemento sin haberlo arrastrado.
`clone`	`SortableEvent`	Se emite cuando se clona un elemento en modo clonación.
`move`	`SortableMoveEventPayload`	Se emite continuamente durante el arrastre; su valor de retorno puede controlar si el movimiento se permite.

Templates

Todavía no hay templates documentados.