--- title: "Listas ordenables" description: "Listas, barras de pestañas y cuadrículas que se reordenan mientras arrastras — makeSortableList renderiza un borrador, makeSortableItem crea las filas y el drop escribe el nuevo orden en tu ref. Asas, línea de inserción, intercambios." canonical_url: "https://zizigy.github.io/vue-dnd-kit/es/docs/guides/sortable-lists" --- > Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt) ## Una lista y sus filas Una lista ordenable necesita dos componentes: la lista y su fila. ```vue [LayersPanel.vue] ``` ```vue [LayerRow.vue] ``` La fila se registra en la lista dentro de la que se renderiza. Un componente puede crear varias listas (dos columnas, una lista dentro de otra): cada fila se une a aquella cuyo elemento la contiene, la más interior en listas anidadas. ## El borrador `makeSortableList` devuelve `items`, un **borrador** de tu array. Mientras arrastras, el borrador se reordena en vivo: la fila arrastrada ocupa su nuevo hueco y las demás se apartan. Tu array no cambia hasta el drop. Entonces la biblioteca escribe en él el nuevo orden. El panel de capas de arriba muestra las dos cosas: el panel renderiza `items` y se mueve mientras arrastras; el lienzo lee `layers`, el propio array, y solo se reapila cuando sueltas. - Renderiza `items`, no tu array. Si renderizas tu array, nada se mueve hasta el drop. - La escritura ocurre después del `onDrop` de la lista. En `onDrop`, tu array todavía tiene el orden anterior y `e.result` el nuevo. - `layers` es una ref normal (aquí un `defineModel`, y la escritura emite `update:modelValue`), así que el resto de tu app ve el cambio como cualquier otro. ```ts makeSortableList(list, { items: layers, onDrop: (e) => { console.log(e.from.index, '→', e.to.index, e.result.get(e.to.list)); }, }); ``` ¿Un store, estado del servidor o datos inmutables? Pasa un getter o un `computed` en lugar de una ref. La biblioteca no escribe en una fuente de solo lectura: llama a `e.preventDefault()` y aplica `e.result` tú mismo. Consulta [listas controladas](https://zizigy.github.io/docs/guides/shared-lists#controlled-lists). ## Claves Las filas se identifican por sus datos, nunca por índice ni por un id automático. Por defecto la clave es `item.id`, o el propio ítem para strings y números. ```ts // LayersPanel.vue: your items have another key makeSortableList(list, { items: layers, getKey: (layer) => layer.uuid }); // LayerRow.vue: `item` is keyed with the list's getKey… makeSortableItem(el, { item: () => props.layer }); // …or pass the key yourself makeSortableItem(el, { id: () => props.layer.uuid }); ``` - Usa la misma clave en `v-for`: `:key="layer.uuid"`. Con `:key="index"` se animan las filas equivocadas y su estado salta de una fila a otra. - Las claves deben ser únicas entre todas las listas que intercambian ítems. - Pasa `item` e `id` como getters, para que una fila siga sincronizada cuando cambian sus props. ## Asas Por defecto toda la fila inicia un arrastre, salvo los botones, inputs y demás controles que contiene: el ojo y el candado de una capa siguen siendo botones normales. Pasa `handle` para arrastrar solo desde una parte: ```vue [LayerRow.vue] ``` - `handle` es un selector dentro del ítem, o una ref de elemento. - Un arrastre con ratón empieza desde el asa de inmediato, sin los 4 px habituales. Una pulsación que no se mueve sigue siendo un clic: el asa puede abrir un menú en `click`. - El asa recibe los atributos del arrastre (`role`, `tabindex`, `aria-*`), y los arrastres con teclado empiezan desde ella. Haz que el asa sea un `