vue-dnd-kit

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

Общие типы

Небольшие типы, на которые ссылается каждая страница API, — ключи, координаты, прямоугольники, ref элементов и реактивные опции.

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

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

Реактивные опции

Большинство опций принимают значение, ref или геттер и читаются тогда, когда нужны: изменение применяется самое позднее к следующему драгу. В таблицах такие опции помечены значение · ref · геттер.

Значение, геттер или любой ref (записываемый, shallow, computed, readonly — например, из useTemplateRef), который библиотека только читает. В отличие от MaybeRefOrGetter из Vue, принимает Ref<string> там, где ожидается string | number.

type MaybeReadonlyRefOrGetter = T | Readonly<Ref<T>> | (() => T)

Значение или любой ref — для опций, где функция сама является значением (компонент оверлея, правило приёма, своя анимация), поэтому геттер от неё не отличить. Храните компоненты в shallowRef (или в computed): Vue не должен делать их реактивными.

type MaybeReadonlyRef = T | Readonly<Ref<T>>

Элементы

Элемент, с которым работает композабл (makeDraggable(target)): сам элемент, template ref (useTemplateRef) или геттер. Он может меняться (v-if): библиотека следит за ним.

type MaybeElementRef = MaybeReadonlyRefOrGetter<MaybeElement>

Элемент: HTML- или SVG-элемент либо экземпляр компонента (его корневой элемент, $el) — в том виде, в каком их отдаёт template ref. null или undefined, пока элемента нет (ещё не смонтирован).

type MaybeElement = | HTMLElement | SVGElement | ComponentRef | null | undefined

Ключи и геометрия

Id или ключ: перетаскиваемого элемента, цели, списка, элемента списка.

type Key = string | number

Точка или смещение, в px: позиция от левого верхнего угла вьюпорта или смещение от места, где начался драг (delta, transform).

x
number

По горизонтали, растёт вправо.

y
number

По вертикали, растёт вниз.

Ширина и высота, в px.

width
number

Ширина в px.

height
number

Высота в px.

Прямоугольник в px, в координатах вьюпорта, — как его отдаёт getBoundingClientRect().

top
number

Его верхний край, от верха вьюпорта.

left
number

Его левый край, от левого края вьюпорта.

width
number

Его ширина.

height
number

Его высота.

right
number

Его правый край, от левого края вьюпорта: left + width.

bottom
number

Его нижний край, от верха вьюпорта: top + height.

Статус

Что делает провайдер:

  • 'idle': ничего;
  • 'activating': нажатие ждёт своего условия активации (расстояния, долгого нажатия);
  • 'dragging': идёт драг;
  • 'dropping': решается бросок (асинхронный onBeforeDrop) или ещё приземляется оверлей;
  • 'selecting': область выделения рисует свою рамку.
type DnDStatus = | 'idle' | 'activating' | 'dragging' | 'dropping' | 'selecting'

Как движется драг, какой бы сенсор им ни управлял (SensorActivation.type): 'pointer' следует за точками, 'keyboard' перемещается по элементам.

type SensorType = 'pointer' | 'keyboard'

Тип указателя, которым нажали (PointerEvent.pointerType): активация настраивается для каждого типа.

type PointerKind = 'mouse' | 'touch' | 'pen'

Значение или промис значения: то, что возвращает хук, который может быть асинхронным (onBeforeDrop).

type MaybePromise = T | Promise<T>