Documentação/API

makeDragArea

Regras para os arrastes que começam dentro de um elemento — um eixo, limites, uma grade, rolagem automática, ativação — sob um único provider para o app inteiro.

Editar esta página

Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês

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

Torna um elemento uma área de arraste: os arrastes que começam dentro dela (draggables e itens ordenáveis) seguem as regras dela, veja DragAreaOptions. Um único provider pode então servir o app inteiro, com quadros, canvases e feeds que arrastam cada um do seu jeito. A área mais próxima vence quando as áreas estão aninhadas.

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

As áreas internas herdam disabled; todas as outras regras vêm da área mais próxima. Veja Eixos, limites e grades.

Os chips dentro da área seguem as regras dela; o que está fora é arrastado livremente.

Live Troque as regras da área, depois arraste um chip dentro dela

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

Opções

Opções de makeDragArea: regras para os arrastes que começam dentro do elemento da área (tanto draggables quanto itens ordenáveis), para que um único provider sirva o app inteiro enquanto partes da página arrastam do seu próprio jeito. Quando há áreas aninhadas, vence a mais próxima.

Toda opção aceita um valor, um ref ou um getter e é lida quando é necessária: quando um clique começa (activation, disabled) ou quando o arraste começa.

axis?

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

Trava os arrastes em um eixo, depois dos modificadores. O axis do próprio draggable (ou da lista dele) prevalece.

modifiers?

Modifier[]valor · ref · getter

Modificadores para os arrastes, depois dos do provider e antes dos do próprio draggable (ou da lista dele): por exemplo, [snapToGrid(20)] para um quadro.

restrictToArea?

booleanvalor · ref · getter

true: os arrastes ficam dentro do elemento da área (depois dos modificadores, antes da trava de eixo).

autoScroll?

boolean | AutoScrollOptionsvalor · ref · getter

Sobrescreve o autoScroll do provider para o contêiner de rolagem da área: o próprio elemento, ou o ancestral rolável mais próximo dele. false a desliga ali. Diferente das outras opções, vale para todo arraste que rola o contêiner, onde quer que tenha começado.

activation?

ActivationOptionsvalor · ref · getter

Ativação dos arrastes por tipo de ponteiro, entre a do próprio draggable (que prevalece) e a do provider: por exemplo, um toque mais longo em um feed com rolagem.

disabled?

booleanvalor · ref · getter

true: nenhum arraste começa na área, nem nas áreas dentro dela (diferente das outras opções, que vêm da área mais próxima). Os draggables dela informam aria-disabled.

Retorno

O que makeDragArea retorna.

isDragging

ComputedRef<boolean>

Um arraste que começou nesta área está em andamento (até o drop dele ser decidido).

isAutoScrolling

ComputedRef<boolean>

A rolagem automática está movendo o contêiner de rolagem da área (o elemento, ou o ancestral rolável mais próximo dele).