Documentación/API

makeSortableItem

Registra una fila de una lista o de un árbol ordenable — se arrastra, hace sitio y aterriza en su hueco.

Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés

function makeSortableItem<TData = unknown>(  target: MaybeElementRef,  options: SortableItemOptions<TData>,): SortableItemReturn;

Convierte un elemento en una fila de una lista ordenable o de un árbol: se arrastra, hace sitio y aterriza en su hueco. Llámalo en un componente renderizado dentro del que llamó a makeSortableList (o makeSortableTree); si allí se crearon varias listas, la fila se une a la más interior cuyo elemento la contiene. Identifica la fila con item (con la clave que da getKey de la lista, item.id por defecto) o con id.

const el = useTemplateRef<HTMLElement>('el');
const { isPlaceholder, index } = makeSortableItem(el, { item: () => props.task, handle: '.grip' });

Consulta Listas ordenables.

Live Arrastra una fila por su asa: la casilla sigue funcionando

Cargando la demo…

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TodoList from './TodoList.vue';
</script>

<template>
  <DnDProvider>
    <TodoList />
  </DnDProvider>
</template>

Opciones

Pasa id o item (id tiene prioridad si se dan los dos). Las claves ordenables deben salir de los datos: un id automático cambiaría cada vez que se vuelve a crear el componente (movido a otra lista, reciclado por una lista virtual), y el arrastre perdería el ítem.

Las opciones, salvo canDrag, aceptan un valor, una ref o un getter (overlay, dropAnimation: un valor o una ref) y significan lo mismo que en makeDraggable. No hay keyboardMode: el teclado mueve un ítem ordenable por huecos.

id?

Keyvalor · ref · getter

Clave del ítem en su lista. Un getter la mantiene actualizada en las listas virtuales.

item?

unknownvalor · ref · getter

El ítem que renderiza este elemento, por ejemplo () => props.task. Su clave sale del getKey de la lista (o del árbol) a la que pertenece, por defecto item.id.

overlay?

Componentvalor · ref

Componente de overlay para este ítem; tiene prioridad sobre el overlay de la lista. Una ref cambiada a mitad del arrastre lo cambia al instante.

dropAnimation?

DropAnimationvalor · ref

Cómo aterriza el overlay cuando termina un arrastre de este ítem; tiene prioridad sobre la dropAnimation de la lista. Se lee al soltar.

modifiers?

Modifier[]valor · ref · getter

Modificadores para los arrastres de este ítem, después de los del provider; tienen prioridad sobre los modifiers de la lista.

axis?

'x' | 'y'valor · ref · getter

Bloquea en un eje los arrastres de este ítem ('x', 'y'); tiene prioridad sobre el axis de la lista.

handle?

MaybeElement | stringvalor · ref · getter

Elemento o selector dentro del ítem que inicia el arrastre (y recibe los atributos).

disabled?

booleanvalor · ref · getter

true: el ítem no se puede arrastrar (como cualquier ítem de una lista desactivada).

type?

string | string[]valor · ref · getter

Su tipo o tipos, para las reglas group.put y el accept de los destinos de drop. Por defecto: el nombre del grupo de su lista.

data?

TDatavalor · ref · getter

Cualquier cosa que deba llevar el arrastre: los eventos y los destinos de drop lo leen como active.data.

label?

stringvalor · ref · getter

El nombre que la gente le da al ítem: los textos para lectores de pantalla lo dicen en lugar de su clave (Picked up Tomato at position 2 of 5 in Garden). Los eventos lo llevan en active.label y en items.

activation?

ActivationOptionsvalor · ref · getter

Sustituye la activation de su lista (o de su árbol) y la del provider. Se lee cuando empieza una pulsación.

canDrag?

(event: PointerEvent | KeyboardEvent) => boolean

Filtro adicional, por ejemplo arrastrar solo mientras se mantiene una tecla.

attributes?

booleanvalor · ref · getter

Pone los atributos role/tabindex/aria-* (true por defecto), sin sobrescribir nunca los del usuario. En vivo: desactivarlo elimina lo que puso la biblioteca.

native?

boolean | NativeDragOptionsvalor · ref · getter

Un arrastre con el ratón es el arrastre propio del navegador, que puede salir de la página (consulta DraggableOptions.native). También lleva el ítem: las listas de su grupo en otra ventana de la app lo aceptan, y cuando una lo hace, sale de esta lista ('move').

Valor devuelto

Lo que devuelve makeSortableItem.

isDragging

ComputedRef<boolean>

Este ítem se está arrastrando (también es true para los demás ítems de un multi-drag), o su overlay aún está aterrizando.

isPlaceholder

ComputedRef<boolean>

Este elemento es un hueco en el que aterrizará un ítem arrastrado: el del ítem activo y, en el modo de multi-drag 'group', los huecos de los ítems que viajan con él.

selected

WritableComputedRef<boolean>

Está en la selección del provider: arrastrar un ítem seleccionado los lleva todos. Asígnalo para seleccionarlo o deseleccionarlo.

indicator

ComputedRef<SortableIndicator | null>

Modo indicador: el indicator de la lista mientras está unido a este ítem, null en otro caso. side indica dónde va la línea; en los árboles, depth y parentKey indican dónde aterriza el drop (side: 'inside': dentro de este ítem).

index

ComputedRef<number>

Índice en el borrador renderizado, -1 cuando se desconoce.