vue-dnd-kit

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

makeSelectionArea

Рамка выделения, которая выделяет перетаскиваемые элементы, которых касается, — потащите один из них, и поедет всё выделение.

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

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

function makeSelectionArea(  target: MaybeElementRef,  options?: SelectionAreaOptions,): SelectionAreaReturn;

Делает элемент областью выделения рамкой для перетаскиваемых элементов внутри него. Рамку рендерите сами: <div v-if="isSelecting" class="band" :style="style" />.

<script setup lang="ts">
const area = useTemplateRef<HTMLElement>('area');
const { isSelecting, style } = makeSelectionArea(area);
</script>

<template>
  <div ref="area" class="area">
    <!-- items -->
    <div v-if="isSelecting" class="band" :style="style" />
  </div>
</template>

Нажатие на пустом месте области начинает рамку. См. мульти-драг и выделение.

Live

Загружаем демо…

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import ShapeBoard from './ShapeBoard.vue';
</script>

<template>
  <DnDProvider>
    <ShapeBoard />
  </DnDProvider>
</template>

Опции

Опции makeSelectionArea. Рамка выделяет в выделение провайдера — то, которое читают мульти-драг и selected (useDnD().selection). modifier, strategy, accept и disabled принимают значение, ref или геттер (accept — значение или ref: функция здесь — это правило) и читаются, когда нажатие начинает рамку. Включение disabled также отменяет уже идущую рамку.

modifier?
SelectionModifierзначение · ref · геттер

Клавиши, которые должны быть зажаты, чтобы нажатие рисовало рамку. По умолчанию: никаких, рамку рисует любое нажатие на пустом месте.

strategy?
SelectionStrategyзначение · ref · геттер

По умолчанию 'toggle'.

accept?
AcceptRuleзначение · ref

Какие перетаскиваемые элементы выделяет рамка; матчер такой же, как у целей.

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

true: нажатия не рисуют рамку.

onSelected?
(ids: Key[]) => void

Рамка закончилась: получает все id, выделенные сейчас.

Возвращает

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

isSelecting
ComputedRef<boolean>

Рамка рисуется: в это время рендерите её.

style
ComputedRef<Record<string, string>>

Стили для элемента прямоугольника выделения (absolute, относительно контейнера).

Значения

  • 'toggle': элементы, которые пересекает рамка, меняют состояние на обратное тому, что было до рамки;
  • 'select': выделены только элементы внутри рамки.
type SelectionStrategy = 'toggle' | 'select'

Клавиши (KeyboardEvent.key или .code), которые нужно удерживать, чтобы нажатие рисовало рамку: все до одной или 'some' — хотя бы одну из них.

keys
string[]

Клавиши — как KeyboardEvent.key ('Shift') или .code ('KeyA'). Если их нет, рамку рисует любое нажатие.

method
'every' | 'some'

'every': должны быть зажаты все keys; 'some': достаточно одной из них.