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 39 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`hubSortable`	`SortableData<T> \| SortableBindings`	—	Datos vinculados al contenedor ordenable: un array, un `FormArray` reactivo o una señal escribible. Se mantiene sincronizado con las operaciones de arrastrar y soltar. Es opcional: el atributo `hubSortable` a secas también activa la directiva, y entonces los outputs informan de cada movimiento sin que se mute nada.
`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.
`keyboardSorting`	`boolean`	`true`	Reordenación por teclado, activada por defecto. Cada elemento pasa a ser una parada de tabulación; `Enter` o `Espacio` lo agarra, las flechas lo mueven, `Inicio` y `Fin` lo llevan a los extremos y `Escape` lo devuelve a su sitio. Ponlo a `false` cuando la aplicación aporte su propio camino de teclado.
`keyboardMessages`	`Partial<SortableKeyboardMessages>`	—	Sustituye las frases que la reordenación por teclado anuncia en su región viva. Lo que no indiques conserva su texto en inglés.
`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.
`delay`	`number`	—	Milisegundos que hay que mantener pulsado antes de que pueda empezar el arrastre. Por defecto `0`; súbelo en táctil para que una pulsación corta haga scroll en vez de arrastrar.
`disabled`	`boolean`	—	Deshabilita el comportamiento ordenable sin retirar la directiva.
`draggable`	`string`	—	Selector CSS que restringe qué elementos hijos pueden arrastrarse.
`handle`	`string`	—	Selector CSS del elemento dentro de cada ítem que inicia el arrastre, dejando interactivo el resto.
`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.
`chosenClass`	`string`	—	Clase CSS aplicada al elemento desde que se selecciona hasta que termina el arrastre. Por defecto `sortable-chosen`.
`dragClass`	`string`	—	Clase CSS aplicada al elemento que sigue al puntero durante el arrastre. Por defecto `sortable-drag`.
`fallbackOnBody`	`boolean`	—	Añade la vista previa del arrastre a `document.body` en vez de a la lista, para que ningún ancestro con `overflow: hidden` la recorte.
`fallbackTolerance`	`number`	—	Píxeles que debe recorrer el puntero antes de que empiece el arrastre de reserva. Por defecto `0`; súbelo para que un toque no se lea como un arrastre.
`fallbackClass`	`string`	—	Clase CSS aplicada al clon de vista previa que se usa cuando se evita el drag-and-drop nativo de HTML5.
`fallbackOffset`	`{ x: number; y: number }`	—	Desplazamiento en píxeles de la vista previa de reserva respecto al puntero.
`forceFallback`	`boolean`	—	Ignora el drag-and-drop nativo de HTML5 y arrastra siempre un clon, que se ve igual en todos los navegadores.
`filter`	`string \| ((event, target, sortable) => boolean)`	—	Selector CSS (o predicado) que marca los elementos que no pueden arrastrarse.
`preventOnFilter`	`boolean`	—	Llama a `preventDefault()` en el evento que disparó `filter`. Por defecto `true`; desactívalo cuando el elemento filtrado sea un control que aún necesita su propio clic.
`direction`	`'vertical' \| 'horizontal' \| ((event, target, dragEl) => 'vertical' \| 'horizontal')`	—	Eje según el que se dispone la lista. Se detecta automáticamente si no se indica; indícalo de forma explícita en rejillas y listas con salto de línea, donde la detección puede fallar.
`swapThreshold`	`number`	—	Fracción del elemento de destino (de 0 a 1) que debe cubrir el puntero para que ambos se intercambien. Por defecto `1`; los valores más bajos intercambian antes.
`invertSwap`	`boolean`	—	Usa siempre la zona de intercambio invertida, de modo que el intercambio ocurre cuando el puntero sale de un elemento en vez de cuando entra.
`invertedSwapThreshold`	`number`	—	Umbral que se usa mientras la zona de intercambio está invertida. Si no se indica, se toma el de `swapThreshold`.
`removeCloneOnHide`	`boolean`	—	Quita el clon del DOM mientras está oculto en vez de limitarse a ocultarlo. Por defecto `true`.
`ignore`	`string`	—	Selector CSS de los elementos dentro de un ítem que nunca deben iniciar un arrastre, como campos de formulario o enlaces.
`touchStartThreshold`	`number`	—	Píxeles que puede moverse el dedo antes de cancelar un arrastre retardado: el margen entre arrastrar y hacer scroll.
`emptyInsertThreshold`	`number`	—	Distancia en píxeles a una lista vacía a la que se inserta en ella el elemento arrastrado. Por defecto `5`; con `0` el puntero tiene que estar dentro de la lista.
`dropBubble`	`boolean`	—	Deja que el evento drop siga propagándose hacia los elementos ancestros.
`dragoverBubble`	`boolean`	—	Deja que el evento dragover siga propagándose hacia los elementos ancestros.
`dataIdAttr`	`string`	—	Atributo HTML que `Sortable.toArray()` y `store` leen como id de cada elemento. Por defecto `data-id`.
`delayOnTouchOnly`	`boolean`	—	Aplica `delay` solo a la entrada táctil, de modo que con ratón el arrastre sigue empezando de inmediato.
`easing`	`string`	—	Función de easing CSS para la animación de reordenación, por ejemplo `cubic-bezier(1, 0, 0, 1)`.
`setData`	`(dataTransfer: DataTransfer, draggedElement: HTMLElement) => void`	—	Se llama al empezar el arrastre para escribir en el `DataTransfer` nativo: es el punto de enganche para arrastrar fuera de la página.
`store`	`{ get: (sortable: Sortable) => string[]; set: (sortable: Sortable) => void }`	—	Par de callbacks `get`/`set` para persistir el orden y restaurarlo en la siguiente carga, usando `dataIdAttr` como clave.

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.