Datos

Arrastrar y soltar

Arrastra para reordenar filas, moverlas entre listas, reorganizar una grilla de tarjetas o las filas de una tabla, con asas, líneas de destino y los mismos movimientos desde el teclado y los lectores de pantalla. Tree, Kanban y las zonas para soltar archivos usan el mismo sistema.

import { ListView, ListItem, DragHandle, DropIndicator, useDragAndDrop, useListData, reorderItems } from '@alea/ui';

Ejemplos

Reordena una lista

Pasa items y onItemsChange: las filas tienen un asa y se pueden arrastrar. Con el teclado: Tab hasta un asa, Enter para tomar, flechas para elegir dónde, Enter para soltar.

Write the brief

Sketch three directions

Review with the team

Ship it

Entre listas

Las listas con el mismo dragGroup aceptan filas de la otra: arrastra una tarea de Por hacer a Hecho, o suéltala en una lista vacía.

To do (3)

Tokens audit

Tree docs

Charts motion

Done (1)

Breadcrumbs

Una grilla de tarjetas

layout="grid" pone los elementos en columnas (las flechas se mueven en dos direcciones) y arrastrar los reordena: dashboards, sets de fotos, elementos fijados.

RevenueDrag to move

UsersDrag to move

PaymentsDrag to move

ActivityDrag to move

RegionsDrag to move

SpeedDrag to move

Filas de tabla

Para tablas, pasa dragAndDropHooks de useDragAndDrop (con useListData para las filas): aparece sola una columna de asas, con el mismo soporte de teclado y lectores de pantalla.

Arrastrar para mover	Page	Owner
	Homepage	Ana
	Pricing	Bruno
	Docs	Carla
	Blog	Dario

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-accent…
--alea-accent-subtle…
--alea-border…
--alea-focus…
--alea-surface…

Space

--alea-space-2…
--alea-space-3…

Radius

--alea-radius-md…
--alea-radius-sm…

Shadow

--alea-shadow-card…

Component

--alea-list-min…

Props

`ListView` props

Ver 12 props heredadas

Una lista de elementos ricos que se pueden seleccionar, abrir o usar, con navegación por teclado. Las filas se pueden arrastrar para reordenar, o entre listas; las tarjetas pueden ir en una grilla.

Prop	Tipo	Por defecto	Descripción
`dragGroup`	`string`	-	Las listas con el mismo dragGroup aceptan filas de la otra. Los items deben ser datos simples (viajan como JSON).
`layout`	`"grid" \| "stack"`	`'stack'`	stack (filas, por defecto) o grid (tarjetas en columnas, las flechas se mueven en dos direcciones). Define el ancho de columna con --alea-list-min.
`onItemsChange`	`((items: T[]) => void)`	-	Con items: las filas se pueden arrastrar para reordenar (y mover entre listas con el mismo dragGroup). Se llama con el nuevo array.
`variant`	`"separated" \| "joined" \| "plain"`	`'joined'`	Líneas entre elementos (joined), tarjetas separadas, o nada (plain).

`DragHandle` props

El asa que inicia un arrastre con el teclado (Enter) o un lector de pantalla. Ponla en las filas de una lista o tabla arrastrable.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-
`label`	`string`	-

`DropIndicator` props

La línea que muestra dónde caerá una fila arrastrada. Úsala en renderDropIndicator de tu propio arrastrar y soltar.

Prop	Tipo	Por defecto	Descripción
`target`obligatoria	`DropTarget`	-	El destino de soltado que representa el indicador. (heredada)
`children`	`ChildrenOrFunction<DisclosureGroupRenderProps>`	-	Los hijos del componente. Puede ser una función para cambiar los hijos según el estado del componente. (heredada)
`className`	`ClassNameOrFunction<DropIndicatorRenderProps>`	-	El [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) CSS del elemento. Puede ser una función para calcular la clase según el estado del componente. (heredada)
`style`	`StyleOrFunction<DisclosureGroupRenderProps>`	-	El [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) en línea del elemento. Puede ser una función para calcular el estilo según el estado del componente. (heredada)

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

`ListView`

Variantes: layoutgridstack
variantseparatedjoinedplain
Estados: Keyboard focusDrop target
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-list
Atributos data: data-variant=joineddata-variant=separateddata-variant=plaindata-layout=griddata-empty

`DragHandle`

Estados: Hover
Motion: press
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-drag-handle

`DropIndicator`

Estados: Drop target
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-drop-indicator
Atributos data: data-layout=grid

Todo arrastre funciona sin mouse: Tab hasta un asa, Enter para tomar, flechas para elegir dónde, Enter para soltar, Escape para cancelar.
Los lectores de pantalla oyen qué se tomó, dónde caería y dónde cayó.
Las líneas de destino y los destinos resaltados muestran a dónde irá; nunca dependen solo del color (una línea y un contorno).

Teclado

Tecla	Acción
`Tab`	Va a un asa de arrastre
`Enter`	Toma y luego suelta
`Flechas`	Elige dónde soltar
`Escape`	Cancela el arrastre

Qué hacer y qué evitar

Hacer

Dale un asa a cada fila que se arrastra para que quienes usan teclado y lector de pantalla puedan moverla.
Usa dragGroup para listas que intercambian filas; mantén los items como datos simples.
Ofrece también una acción de menú (Mover a…) para movimientos largos.

Evitar

No hagas del arrastre la única forma de hacer algo importante.
No hagas toda la fila un destino de arrastre y además un enlace.