Documentation/API

makeDragArea

Des règles pour les glissements qui commencent à l'intérieur d'un élément — un axe, des limites, une grille, le défilement automatique, l'activation — sous un seul provider pour toute l'application.

Modifier cette page

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

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

Fait d'un élément une zone de glissement : les glissements qui y commencent (éléments déplaçables et items triables) suivent ses règles, voir DragAreaOptions. Un seul provider peut alors servir toute l'application, avec des tableaux, des canevas et des fils qui glissent chacun à leur manière. Quand des zones sont imbriquées, la plus proche l'emporte.

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

Les zones intérieures héritent de disabled ; toutes les autres règles viennent de la zone la plus proche. Voir Axes, limites et grilles.

Les pastilles à l'intérieur de la zone suivent ses règles ; celle qui est à l'extérieur glisse librement.

Live Changez les règles de la zone, puis faites glisser une pastille à l'intérieur

Chargement de la démo…

<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>

Options

Options de makeDragArea : des règles pour les glissements qui commencent à l'intérieur de l'élément de la zone (éléments déplaçables comme items triables), pour qu'un seul provider serve toute l'application tandis que certaines parties de la page ont leur propre façon de glisser. Quand des zones sont imbriquées, la plus proche l'emporte.

Chaque option accepte une valeur, une ref ou un getter, et est lue au moment où elle est nécessaire : au début d'un appui (activation, disabled) ou au début du glissement.

axis?

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

Verrouille les glissements sur un axe, après les modificateurs. L'axis propre à un élément déplaçable (ou celui de sa liste) l'emporte.

modifiers?

Modifier[]valeur · ref · getter

Modificateurs des glissements, après ceux du provider et avant ceux propres à l'élément déplaçable (ou ceux de sa liste) : par exemple [snapToGrid(20)] pour un tableau.

restrictToArea?

booleanvaleur · ref · getter

true : les glissements restent à l'intérieur de l'élément de la zone (après les modificateurs, avant le verrouillage d'axe).

autoScroll?

boolean | AutoScrollOptionsvaleur · ref · getter

Remplace l'autoScroll du provider pour le conteneur défilant de la zone : l'élément lui-même, ou son ancêtre défilable le plus proche. false le désactive à cet endroit. Contrairement aux autres options, elle s'applique à tout glissement qui fait défiler le conteneur, où qu'il ait commencé.

activation?

ActivationOptionsvaleur · ref · getter

Activation des glissements par type de pointeur, entre celle propre à l'élément déplaçable (qui l'emporte) et celle du provider : par exemple un appui tactile plus long dans un fil qui défile.

disabled?

booleanvaleur · ref · getter

true : aucun glissement ne commence dans la zone, ni dans les zones qu'elle contient (contrairement aux autres options, qui viennent de la zone la plus proche). Ses éléments déplaçables indiquent aria-disabled.

Valeur de retour

Ce que renvoie makeDragArea.

isDragging

ComputedRef<boolean>

Un glissement commencé dans cette zone est en cours (jusqu'à ce que son dépôt soit décidé).

isAutoScrolling

ComputedRef<boolean>

Le défilement automatique fait défiler le conteneur défilant de la zone (l'élément, ou son ancêtre défilable le plus proche).