文档/API

makeDragArea

为在某个元素内部开始的拖拽设定规则——轴、边界、网格、自动滚动、激活——全部在同一个应用级 provider 之下。

本页由 AI 翻译，可能存在不准确之处。阅读英文原文

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

让元素成为拖拽区域：在它内部开始的拖拽（可拖拽元素和可排序项）遵循它的规则，见 DragAreaOptions。这样一个 provider 就能服务整个应用，其中的看板、画布和信息流各自以自己的方式拖拽。区域嵌套时，最近的区域胜出。

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

内层区域会继承 disabled；其他每条规则都来自最近的区域。参见轴、边界与网格。

区域内的标签遵循它的规则；区域外的那个可以自由拖动。

Live 切换区域的规则，然后拖动区域内的一个标签

正在加载演示…

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

选项

makeDragArea 的选项：为在区域元素内部开始的拖拽（普通可拖拽元素和可排序项都一样）设定规则，这样一个 provider 就能服务整个应用，而页面的各个部分可以按自己的方式拖拽。区域嵌套时，最近的区域优先。

每个选项都接受值、ref 或 getter，并在需要时读取：按下开始时（activation、disabled）或拖拽开始时。

'x' | 'y'值 · ref · getter

在修饰器之后，把拖拽锁定在一个轴上。可拖拽元素自身的 axis（或其列表的）优先。

Modifier[]值 · ref · getter

拖拽的修饰器，在 provider 的之后、可拖拽元素自己的（或其列表的）之前运行：例如为面板设置 [snapToGrid(20)]。

restrictToArea?

boolean值 · ref · getter

true：拖拽保持在区域的元素内（在修饰器之后、轴锁定之前）。

boolean | AutoScrollOptions值 · ref · getter

为区域的滚动容器覆盖 provider 的 autoScroll：滚动容器是该元素本身，或离它最近的可滚动祖先。false 在那里关闭自动滚动。与其他选项不同，它适用于每一次滚动该容器的拖拽，无论拖拽从哪里开始。

ActivationOptions值 · ref · getter

按指针类型设置拖拽的激活条件，介于可拖拽元素自己的（优先）和 provider 的之间：例如在可滚动的信息流中使用更长的触摸按压。

boolean值 · ref · getter

true：区域内不会开始任何拖拽，其内部的区域也一样（与其他选项不同，其他选项取自最近的区域）。区域中的可拖拽元素会报告 aria-disabled。

返回值

makeDragArea 的返回值。

ComputedRef<boolean>

从这个区域开始的拖拽正在进行（直到放置结果确定）。

isAutoScrolling

ComputedRef<boolean>

自动滚动正在滚动区域的滚动容器（该元素，或离它最近的可滚动祖先）。