Dokumentation/API
Modifier und Kollisionserkennung
Funktionen, die ändern, wohin das gezogene Element geht, und solche, die das Ziel darunter wählen.
Diese Seite wurde von KI übersetzt und kann Ungenauigkeiten enthalten. Englisches Original lesen
Demo wird geladen…
<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>Modifier
import { restrictToParent, snapToGrid } from '@vue-dnd-kit/core';
makeSortableList(list, { items, modifiers: [restrictToParent] });
makeDragArea(board, { modifiers: [snapToGrid({ x: 24, y: 24, smooth: true })] });
Ein Modifier nimmt den Versatz des Drags entgegen und gibt einen neuen zurück. Sie laufen in
dieser Reihenfolge: die modifiers des Providers, die eines Drag-Bereichs, die eigenen des
ziehbaren Elements (oder die seiner Liste), dann die Grenzen des Bereichs (restrictToArea) und
zuletzt die axis-Sperre. Siehe Achsen, Grenzen und Raster.
ModifierBewegt nur vertikal: Horizontal bleibt es bei dem Inhalt, in dem es begann (containerShift), wie auch immer die Seite scrollt. Die Option axis: 'y' macht dasselbe, als Letztes.
ModifierBewegt nur horizontal: Vertikal bleibt es bei dem Inhalt, in dem es begann (containerShift), wie auch immer die Seite scrollt. Die Option axis: 'x' macht dasselbe, als Letztes.
ModifierHält das Overlay innerhalb des Fensters.
ModifierHält das Overlay innerhalb des Containers, in dem der Drag begann: der sortierbaren Liste (nicht ihres DOM-Elternelements) oder, bei einfachen ziehbaren Elementen, des Elternelements.
(target: MaybeElementRef) => ModifierHält das Overlay innerhalb eines Elements: das Element, ein Ref oder ein Getter.
ModifierHält das Overlay innerhalb des ersten scrollbaren Vorfahren des gezogenen Elements.
(size: number | SnapToGridOptions) => ModifierLässt das Overlay an einem Raster einrasten, in der nächsten Zelle: Eine Zahl ist die Größe quadratischer Zellen; Optionen legen jede Achse fest, wo das Raster beginnt und ein Gleiten zwischen den Zellen (SnapToGridOptions).
ModifierZentriert das Overlay unter dem Zeiger, statt den Greifversatz beizubehalten.
Optionen von snapToGrid.
numberDie Breite der Zelle in px. Ohne sie (oder bei 0) bewegt sich der Drag frei entlang x.
numberDie Höhe der Zelle in px. Ohne sie (oder bei 0) bewegt sich der Drag frei entlang y: { y: 15 } rastet nur die Uhrzeit eines Kalendertermins ein.
'container' | 'delta''container' (Standard): Die obere linke Ecke des Overlays landet auf Rasterlinien, die von der oberen linken Ecke des Containers aus gezogen werden (containerRect: die sortierbare Liste oder das Elternelement). 'delta': Der Versatz des Drags wird gerundet, sodass die Startposition des Elements außerhalb des Rasters erhalten bleibt.
boolean | AnimationOptionsLässt das Overlay zwischen eingerasteten Positionen gleiten (Standard 80 ms). Die Kollisionserkennung nutzt trotzdem sofort die eingerastete Position.
Ändert, wohin das gezogene Element geht: nimmt den Versatz des Drags (transform) und gibt einen neuen zurück.
type Modifier = (args: ModifierArgs) => CoordinatesWas ein Modifier bei jeder Bewegung des Drags erhält.
CoordinatesVersatz seit dem Start des Drags, wie ihn die vorherigen Modifier verändert haben.
ActiveDer Drag.
RectRechteck des gezogenen Elements beim Start des Drags.
RectRechteck der Overlay-Box, wenn sie um transform verschoben würde, in ihrer jetzigen Größe. Mit overlayFit: 'slot' ändert die Box ihre Größe um den Zeiger herum, daher ist sie nicht immer activeRect, verschoben um transform.
CoordinatesPosition des Zeigers beim Start des Drags.
Rect | nullContainer der sortierbaren Liste (oder Elternelement) des gezogenen Elements, dort, wo er jetzt ist (er folgt dem Scrollen).
CoordinatesWie weit sich der Inhalt, in dem der Drag gestartet ist, seit dem Start auf dem Bildschirm bewegt hat: Der Container hat sich bewegt (die Seite oder ein Container um ihn herum wurde gescrollt, das Layout hat sich verschoben), und sein Inhalt wurde in ihm gescrollt. Achsensperren halten die andere Achse dort, sodass der Drag in seiner Zeile oder Spalte dieses Inhalts bleibt.
RectRechteck des Fensters (der Viewport).
Over | nullDas Drop-Ziel unter dem Drag, wie zuletzt gefunden; null über nichts.
Kollisionserkennung
import { closestCorners } from '@vue-dnd-kit/core';
<DnDProvider :collision="closestCorners" />
Die Option collision des Providers wählt das Ziel; der beste Kandidat kommt zuerst.
CollisionDetectionStandard: was unter dem Zeiger ist, sonst was das Overlay überlappt.
CollisionDetectionZiele unter dem Zeiger, aus dem Hit-Testing: berücksichtigt z-Reihenfolge, Overlays und Shadow Roots.
CollisionDetectionZiele, die das Overlay überlappen: höhere Priorität, dann tiefere Verschachtelung, dann Intersection over Union.
CollisionDetectionJedes Ziel, nach dem Abstand zwischen den Mittelpunkten.
CollisionDetectionJedes Ziel, nach der Summe der Abstände zwischen den Ecken (gut für gestapelte Ziele wie Kanban-Spalten).
Gibt die IDs der Kandidaten zurück, den besten zuerst.
type CollisionDetection = (args: CollisionArgs) => Key[]Was eine Kollisionserkennung bei jeder Bewegung des Drags erhält.
CoordinatesZeiger in Viewport-Koordinaten, nach den Modifiern.
Rect | nullRechteck der gezogenen Box (das Overlay oder das Element selbst bei overlay: false) dort, wohin der Drag sie bewegt hat.
CollisionCandidate[]Jedes Drop-Ziel, zu dem der Drag gehen könnte, ob seine accept-Regel den Drag annimmt oder nicht.
Key[]Drop-Ziele unter dem Zeiger aus dem Hit-Testing (berücksichtigt z-Reihenfolge und Shadow Roots), das beste zuerst.
Ein Drop-Ziel, das eine Kollisionserkennung auswählen kann: aktiviert, auf der Seite und nicht vollständig abgeschnitten.
KeyID des Drop-Ziels.
RectSichtbarer Teil des Ziels: beschnitten durch seine Scroll-Container und den Viewport.
numberDie priority des Ziels (Standard 0): Der höhere Wert gewinnt, wenn sich Ziele ohne Verschachtelung überlappen. Sortierbare Elemente schlagen Container.
numberVerschachtelungsebene unter den Drop-Zielen: 0 ganz oben, tiefere Ziele haben höhere Werte.