Documentation/API
Modificateurs et collision
Les fonctions qui changent l'endroit où va l'item glissé, et celles qui choisissent la cible en dessous.
Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais
Chargement de la démo…
<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider, closestCenter, closestCorners, pointerFirst, pointerWithin, rectIntersection } from '@vue-dnd-kit/core';
import ModifierLab from './ModifierLab.vue';
// Collision detection is the provider's: it picks the target, here one of the two pads.
const COLLISIONS = { pointerFirst, pointerWithin, rectIntersection, closestCenter, closestCorners };
const collision = ref<keyof typeof COLLISIONS>('pointerFirst');
</script>
<template>
<DnDProvider :collision="COLLISIONS[collision]">
<div class="demo">
<code class="call"><DnDProvider :collision="{{ collision }}"></code>
<div class="collisions" role="radiogroup" aria-label="collision">
<label v-for="name in Object.keys(COLLISIONS)" :key="name" :class="{ on: collision === name }">
<input v-model="collision" type="radio" :value="name" />
{{ name }}
</label>
</div>
<ModifierLab />
</div>
</DnDProvider>
</template>
<style scoped>
.demo {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.collisions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
max-width: 100%;
padding: 3px;
border-radius: 9px;
background: color-mix(in srgb, currentColor 7%, transparent);
}
.call {
font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
color: #42b883;
}
label {
padding: 4px 8px;
border-radius: 6px;
font: 11px/1.3 ui-monospace, Menlo, Consolas, monospace;
cursor: pointer;
}
label.on {
background: Canvas;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
font-weight: 600;
}
label:has(input:focus-visible) {
outline: 2px solid #42b883;
}
input {
position: absolute;
opacity: 0;
pointer-events: none;
}
</style>Modificateurs
import { restrictToParent, snapToGrid } from '@vue-dnd-kit/core';
makeSortableList(list, { items, modifiers: [restrictToParent] });
makeDragArea(board, { modifiers: [snapToGrid({ x: 24, y: 24, smooth: true })] });
Un modificateur prend le décalage du glissement et en renvoie un nouveau. Ils s'exécutent dans
l'ordre : les modifiers du provider, ceux d'une zone de glissement, ceux propres à l'élément
déplaçable (ou ceux de sa liste), puis les limites de la zone (restrictToArea), et le verrouillage
d'axis en dernier. Voir Axes, limites et grilles.
ModifierDéplace uniquement à la verticale : à l'horizontale, il reste avec le contenu dans lequel il a commencé (containerShift), quel que soit le défilement de la page. L'option axis: 'y' fait la même chose, en dernier.
ModifierDéplace uniquement à l'horizontale : à la verticale, il reste avec le contenu dans lequel il a commencé (containerShift), quel que soit le défilement de la page. L'option axis: 'x' fait la même chose, en dernier.
ModifierGarde l'overlay dans la fenêtre.
ModifierGarde l'overlay dans le conteneur où le glissement a commencé : la liste triable (pas son parent dans le DOM) ou, pour les éléments déplaçables simples, l'élément parent.
(target: MaybeElementRef) => ModifierGarde l'overlay dans un élément : l'élément, une ref ou un getter.
ModifierGarde l'overlay dans le premier ancêtre défilable de l'élément glissé.
(size: number | SnapToGridOptions) => ModifierAligne l'overlay sur une grille, sur la cellule la plus proche : un nombre est la taille de cellules carrées ; des options définissent chaque axe, l'origine de la grille et un glissement fluide entre les cellules (SnapToGridOptions).
ModifierCentre l'overlay sous le pointeur au lieu de garder le décalage de saisie.
Options de snapToGrid.
numberLa largeur de la cellule en px. Sans elle (ou à 0), le glissement se déplace librement sur x.
numberLa hauteur de la cellule en px. Sans elle (ou à 0), le glissement se déplace librement sur y : { y: 15 } aligne uniquement l'heure d'un événement de calendrier.
'container' | 'delta''container' (par défaut) : le coin supérieur gauche de l'overlay se pose sur des lignes de grille tracées depuis le coin supérieur gauche du conteneur (containerRect : la liste triable ou l'élément parent). 'delta' : le décalage du glissement est arrondi, en gardant la position de départ de l'item hors de la grille.
boolean | AnimationOptionsFait glisser l'overlay en douceur entre les positions alignées (80 ms par défaut). La détection de collision utilise quand même tout de suite la position alignée.
Change l'endroit où va l'item glissé : reçoit le décalage du glissement (transform) et en renvoie un nouveau.
type Modifier = (args: ModifierArgs) => CoordinatesCe que reçoit un modificateur, à chaque mouvement du glissement.
CoordinatesDécalage depuis le début du glissement, tel que modifié par les modificateurs précédents.
ActiveLe glissement.
RectRectangle de l'élément glissé au début du glissement.
RectRectangle de la boîte de l'overlay si elle était déplacée de transform, à sa taille actuelle. Avec overlayFit: 'slot', la boîte se redimensionne autour du pointeur : ce n'est donc pas toujours activeRect déplacé de transform.
CoordinatesPosition du pointeur au début du glissement.
Rect | nullConteneur de la liste triable (ou élément parent) de l'item glissé, là où il se trouve maintenant (il suit le défilement).
CoordinatesDe combien le contenu où le glissement a commencé s'est déplacé à l'écran depuis le début : le conteneur a bougé (la page ou un conteneur autour a défilé, la mise en page s'est décalée), et son contenu a défilé à l'intérieur. Les verrouillages d'axe y maintiennent l'autre axe, si bien que le glissement reste sur sa ligne ou sa colonne de ce contenu.
RectRectangle de la fenêtre (le viewport).
Over | nullLa cible de dépôt sous le glissement, telle que trouvée en dernier ; null au-dessus de rien.
Détection de collision
import { closestCorners } from '@vue-dnd-kit/core';
<DnDProvider :collision="closestCorners" />
La collision du provider choisit la cible ; le meilleur candidat vient en premier.
CollisionDetectionPar défaut : ce qui est sous le pointeur, sinon ce que l'overlay chevauche.
CollisionDetectionLes cibles sous le pointeur, par test de collision : respecte l'ordre z, les overlays et les shadow roots.
CollisionDetectionLes cibles que chevauche l'overlay : priorité la plus haute, puis imbrication la plus profonde, puis intersection sur union.
CollisionDetectionToutes les cibles, par distance entre les centres.
CollisionDetectionToutes les cibles, par somme des distances entre les coins (adapté aux cibles empilées comme les colonnes d'un tableau kanban).
Renvoie les ids des candidats, le meilleur en premier.
type CollisionDetection = (args: CollisionArgs) => Key[]Ce que reçoit une détection de collision, à chaque mouvement du glissement.
CoordinatesLe pointeur en coordonnées du viewport, après les modificateurs.
Rect | nullRectangle de la boîte glissée (l'overlay, ou l'élément lui-même avec overlay: false) là où le glissement l'a amenée.
CollisionCandidate[]Toutes les cibles de dépôt où le glissement pourrait aller, que leur règle accept accepte le glissement ou non.
Key[]Cibles de dépôt sous le pointeur, issues du test de collision (respecte l'ordre d'empilement et les shadow roots), la meilleure en premier.
Une cible de dépôt qu'une détection de collision peut choisir : activée, présente sur la page et pas entièrement rognée.
KeyId de la cible de dépôt.
RectPartie visible de la cible : rognée par ses conteneurs défilants et par le viewport.
numberLa priority de la cible (0 par défaut) : la plus haute l'emporte quand des cibles se chevauchent sans être imbriquées. Les items triables l'emportent sur les conteneurs.
numberNiveau d'imbrication parmi les cibles de dépôt : 0 au sommet, les cibles plus profondes ont des valeurs plus élevées.