vue-dnd-kit

Documentation/API

makeSortableItem

Enregistre une ligne d'une liste ou d'un arbre triable — elle glisse, fait de la place et atterrit sur son emplacement.

Modifier cette page

Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais

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

Fait d'un élément une ligne d'une liste triable ou d'un arbre : elle se glisse, fait de la place et atterrit dans son emplacement. Appelez-le dans un composant rendu à l'intérieur de celui qui a appelé makeSortableList (ou makeSortableTree) ; parmi plusieurs listes créées là, la ligne rejoint la plus intérieure dont l'élément la contient. Identifiez la ligne par item (avec la clé donnée par le getKey de la liste, item.id par défaut) ou par id.

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

Voir Listes triables.

Live

Chargement de la démo…

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

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

Options

Passez id ou item (id l'emporte quand les deux sont fournis). Les clés triables doivent venir des données : un id automatique changerait chaque fois que le composant est recréé (déplacé dans une autre liste, recyclé par une liste virtuelle), et le glissement perdrait l'item.

Les options, sauf canDrag, acceptent une valeur, une ref ou un getter (overlay, dropAnimation : une valeur ou une ref) et signifient la même chose que dans makeDraggable. Il n'y a pas de keyboardMode : le clavier déplace un item triable par emplacements.

id?
Keyvaleur · ref · getter

Clé de l'item dans sa liste. Un getter la garde à jour dans les listes virtuelles.

item?
unknownvaleur · ref · getter

L'item que rend cet élément, par exemple () => props.task. Sa clé vient du getKey de la liste (ou de l'arbre) propriétaire, par défaut item.id.

overlay?
Componentvaleur · ref

Composant d'overlay pour cet item ; l'emporte sur l'overlay de la liste. Une ref changée en plein glissement le remplace aussitôt.

dropAnimation?
DropAnimationvaleur · ref

Comment l'overlay atterrit quand un glissement de cet item se termine ; l'emporte sur la dropAnimation de la liste. Lu au dépôt.

modifiers?
Modifier[]valeur · ref · getter

Modificateurs des glissements de cet item, après ceux du provider ; l'emportent sur les modifiers de la liste.

axis?
'x' | 'y'valeur · ref · getter

Verrouille les glissements de cet item sur un axe ('x', 'y') ; l'emporte sur l'axis de la liste.

handle?
MaybeElement | stringvaleur · ref · getter

Élément ou sélecteur, à l'intérieur de l'item, qui lance le glissement (et reçoit les attributs).

disabled?
booleanvaleur · ref · getter

true : l'item ne peut pas être glissé (comme tout item d'une liste désactivée).

type?
string | string[]valeur · ref · getter

Son type ou ses types, pour les règles group.put et l'accept des cibles de dépôt. Par défaut : le nom du groupe de sa liste.

data?
TDatavaleur · ref · getter

Tout ce que le glissement doit transporter : les événements et les cibles de dépôt le lisent dans active.data.

label?
stringvaleur · ref · getter

Le nom que les gens donnent à l'item : les textes pour les lecteurs d'écran le disent à la place de sa clé (Picked up Tomato at position 2 of 5 in Garden). Les événements le transportent dans active.label et dans items.

activation?
ActivationOptionsvaleur · ref · getter

Remplace l'activation de sa liste (ou de son arbre) et celle du provider. Lue au début d'un appui.

canDrag?
(event: PointerEvent | KeyboardEvent) => boolean

Filtre supplémentaire, par exemple ne faire glisser que pendant qu'une touche est maintenue.

attributes?
booleanvaleur · ref · getter

Définit les attributs role/tabindex/aria-* (true par défaut), sans jamais écraser ceux de l'utilisateur. Réactif : le désactiver retire ce que la bibliothèque avait défini.

native?
boolean | NativeDragOptionsvaleur · ref · getter

Un glissement à la souris est le glissement propre au navigateur, qui peut quitter la page (voir DraggableOptions.native). Il transporte aussi l'item : les listes de son groupe dans une autre fenêtre de l'application l'acceptent, et quand l'une d'elles le fait, il quitte cette liste ('move').

Valeur de retour

Ce que renvoie makeSortableItem.

isDragging
ComputedRef<boolean>

Cet item est en cours de glissement (vrai aussi pour les autres items d'un multi-drag), ou son overlay est encore en train d'atterrir.

isPlaceholder
ComputedRef<boolean>

Cet élément est un emplacement où un item glissé va atterrir : celui de l'item actif et, en mode multi-drag 'group', les emplacements des items qui voyagent avec lui.

selected
WritableComputedRef<boolean>

Il fait partie de la sélection du provider : glisser un item sélectionné les emporte tous. Modifiez-le pour sélectionner ou désélectionner.

indicator
ComputedRef<SortableIndicator | null>

Mode indicateur : l'indicator de la liste tant qu'il est rattaché à cet item, null sinon. side indique où va la ligne ; dans les arbres, depth et parentKey indiquent où atterrit le dépôt (side: 'inside' : dans cet item).

index
ComputedRef<number>

Index dans le brouillon rendu, -1 quand il est inconnu.