Dokumentation/API

makeDragArea

Regeln für die Drags, die in einem Element beginnen – eine Achse, Grenzen, ein Raster, Auto-Scroll, Aktivierung – unter einem einzigen Provider für die ganze App.

Diese Seite bearbeiten

Diese Seite wurde von KI übersetzt und kann Ungenauigkeiten enthalten. Englisches Original lesen

function makeDragArea(  target: MaybeElementRef,  options?: DragAreaOptions,): DragAreaReturn;

Macht ein Element zu einem Drag-Bereich: Die Drags, die darin beginnen (ziehbare und sortierbare Elemente), folgen seinen Regeln, siehe DragAreaOptions. Ein Provider kann dann die ganze App bedienen, mit Boards, Canvases und Feeds, die jeweils auf ihre eigene Art ziehen. Bei verschachtelten Bereichen gewinnt der nächstgelegene.

const board = useTemplateRef<HTMLElement>('board');
makeDragArea(board, { restrictToArea: true, modifiers: [snapToGrid(24)] });

Innere Bereiche erben disabled; jede andere Regel kommt vom nächstgelegenen Bereich. Siehe Achsen, Grenzen und Raster.

Die Chips im Bereich folgen seinen Regeln; der Chip außerhalb lässt sich frei ziehen.

Live Schalte die Regeln des Bereichs um, dann ziehe einen Chip darin

Demo wird geladen…

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

<template>
  <!-- One provider for everything: the area changes the rules only for the drags that start in it. -->
  <DnDProvider>
    <AreaDesk />
  </DnDProvider>
</template>

Optionen

Optionen von makeDragArea: Regeln für die Drags, die innerhalb des Elements des Bereichs beginnen (ziehbare wie sortierbare Elemente), sodass ein einziger Provider die ganze App bedienen kann, während Teile der Seite auf ihre eigene Weise ziehen. Bei verschachtelten Bereichen gewinnt der nächstgelegene.

Jede Option nimmt einen Wert, ein Ref oder einen Getter entgegen und wird gelesen, wenn sie gebraucht wird: wenn ein Druck beginnt (activation, disabled) oder wenn der Drag beginnt.

axis?

'x' | 'y'Wert · Ref · Getter

Beschränkt die Drags auf eine Achse, nach den Modifiern. Das eigene axis eines ziehbaren Elements (oder das seiner Liste) gewinnt.

modifiers?

Modifier[]Wert · Ref · Getter

Modifier für die Drags, nach denen des Providers und vor den eigenen des ziehbaren Elements (oder denen seiner Liste): z. B. [snapToGrid(20)] für ein Board.

restrictToArea?

booleanWert · Ref · Getter

true: Die Drags bleiben innerhalb des Elements des Bereichs (nach den Modifiern, vor der Achsensperre).

autoScroll?

boolean | AutoScrollOptionsWert · Ref · Getter

Überschreibt autoScroll des Providers für den Scroll-Container des Bereichs: das Element selbst oder seinen nächsten scrollbaren Vorfahren. false schaltet es dort aus. Anders als die anderen Optionen gilt es für jeden Drag, der den Container scrollt, egal wo er begonnen hat.

activation?

ActivationOptionsWert · Ref · Getter

Aktivierung der Drags pro Zeigerart, zwischen der eigenen des ziehbaren Elements (die gewinnt) und der des Providers: z. B. ein längeres Drücken per Touch in einem scrollenden Feed.

disabled?

booleanWert · Ref · Getter

true: Kein Drag beginnt im Bereich, auch nicht in den Bereichen darin (anders als bei den anderen Optionen, die vom nächstgelegenen Bereich kommen). Seine ziehbaren Elemente melden aria-disabled.

Rückgabe

Was makeDragArea zurückgibt.

isDragging

ComputedRef<boolean>

Ein Drag, der in diesem Bereich begonnen hat, läuft (bis über seinen Drop entschieden ist).

isAutoScrolling

ComputedRef<boolean>

Auto-Scroll bewegt den Scroll-Container des Bereichs (das Element oder seinen nächsten scrollbaren Vorfahren).