Документация/API

makeDragArea

Правила для драгов, которые начинаются внутри элемента, — ось, границы, сетка, автоскролл, активация — при одном провайдере на всё приложение.

Редактировать страницу

Страница переведена ИИ и может содержать неточности. Читать английский оригинал

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

Делает элемент областью перетаскивания: драги, которые начинаются внутри неё (перетаскиваемые элементы и элементы сортируемых списков), следуют её правилам, см. DragAreaOptions. Тогда один провайдер может обслуживать всё приложение — с досками, холстами и лентами, где перетаскивание устроено по-своему. При вложенных областях побеждает ближайшая.

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: правила для драгов, которые начинаются внутри элемента области (и для перетаскиваемых элементов, и для элементов сортируемых списков). Так один провайдер обслуживает всё приложение, а части страницы перетаскивают по-своему. Если области вложены, побеждает ближайшая.

Каждая опция принимает значение, ref или геттер и читается, когда она нужна: в начале нажатия (activation, disabled) или в начале драга.

axis?

'x' | 'y'значение · ref · геттер

Фиксирует драги по одной оси, после модификаторов. Собственный axis перетаскиваемого элемента (или его списка) важнее.

modifiers?

Modifier[]значение · ref · геттер

Модификаторы драгов: после модификаторов провайдера и до собственных модификаторов перетаскиваемого элемента (или его списка). Например, [snapToGrid(20)] для доски.

restrictToArea?

booleanзначение · ref · геттер

true: драги не выходят за пределы элемента области (после модификаторов, до фиксации оси).

autoScroll?

boolean | AutoScrollOptionsзначение · ref · геттер

Переопределяет autoScroll провайдера для скролл-контейнера области: самого элемента или его ближайшего прокручиваемого предка. false выключает там автоскролл. В отличие от остальных опций, действует на любой драг, который прокручивает этот контейнер, где бы драг ни начался.

activation?

ActivationOptionsзначение · ref · геттер

Активация драгов для каждого типа указателя — между собственной активацией перетаскиваемого элемента (она важнее) и активацией провайдера. Например, более долгое нажатие касанием в прокручиваемой ленте.

disabled?

booleanзначение · ref · геттер

true: в области не начинается ни один драг, как и во вложенных в неё областях (в отличие от остальных опций, которые берутся из ближайшей области). Её перетаскиваемые элементы выставляют aria-disabled.

Возвращает

Что возвращает makeDragArea.

isDragging

ComputedRef<boolean>

Идёт драг, начатый в этой области (пока не решится его бросок).

isAutoScrolling

ComputedRef<boolean>

Автоскролл прокручивает скролл-контейнер области (сам элемент или его ближайшего прокручиваемого предка).