Documentación/API

makeDragArea

Reglas para los arrastres que empiezan dentro de un elemento — un eje, límites, una cuadrícula, desplazamiento automático, activación — bajo un único provider para toda la app.

Editar esta página

Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés

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

Convierte un elemento en un área de arrastre: los arrastres que empiezan dentro de ella (elementos arrastrables e ítems ordenables) siguen sus reglas, consulta DragAreaOptions. Así un solo provider puede servir a toda la app, con tableros, lienzos y feeds que arrastran cada uno a su manera. Cuando hay áreas anidadas, gana la más cercana.

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

Las áreas interiores heredan disabled; todas las demás reglas vienen del área más cercana. Consulta Ejes, límites y cuadrículas.

Las fichas dentro del área siguen sus reglas; la que está fuera se arrastra libremente.

Live Cambia las reglas del área y luego arrastra una ficha dentro de ella

Cargando la demo…

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

Opciones

Opciones de makeDragArea: reglas para los arrastres que empiezan dentro del elemento del área (tanto elementos arrastrables como ítems ordenables), de modo que un único provider pueda servir a toda la app mientras partes de la página arrastran a su manera. Cuando hay áreas anidadas, gana la más cercana.

Cada opción acepta un valor, una ref o un getter, y se lee cuando hace falta: cuando empieza una pulsación (activation, disabled) o cuando empieza el arrastre.

axis?

'x' | 'y'valor · ref · getter

Bloquea los arrastres en un eje, después de los modificadores. Tiene prioridad el axis propio de un elemento arrastrable (o el de su lista).

modifiers?

Modifier[]valor · ref · getter

Modificadores para los arrastres, después de los del provider y antes de los propios del elemento arrastrable (o los de su lista): por ejemplo [snapToGrid(20)] para un tablero.

restrictToArea?

booleanvalor · ref · getter

true: los arrastres se quedan dentro del elemento del área (después de los modificadores, antes del bloqueo de eje).

autoScroll?

boolean | AutoScrollOptionsvalor · ref · getter

Sustituye el autoScroll del provider para el contenedor desplazable del área: el propio elemento, o su ancestro desplazable más cercano. false lo desactiva ahí. A diferencia de las demás opciones, se aplica a todo arrastre que desplace el contenedor, empiece donde empiece.

activation?

ActivationOptionsvalor · ref · getter

Activación de los arrastres según el tipo de puntero, entre la propia del elemento arrastrable (que tiene prioridad) y la del provider: por ejemplo, una pulsación táctil más larga en un feed con scroll.

disabled?

booleanvalor · ref · getter

true: no empieza ningún arrastre en el área, ni en las áreas que contiene (a diferencia de las demás opciones, que vienen del área más cercana). Sus elementos arrastrables indican aria-disabled.

Valor devuelto

Lo que devuelve makeDragArea.

isDragging

ComputedRef<boolean>

Hay en curso un arrastre que empezó en esta área (hasta que se decide su drop).

isAutoScrolling

ComputedRef<boolean>

El desplazamiento automático está moviendo el contenedor desplazable del área (el elemento, o su ancestro desplazable más cercano).