Документация/API
makeDroppable
Делает элемент целью — с правилами, что она принимает, и хуками для броска.
Страница переведена ИИ и может содержать неточности. Читать английский оригинал
function makeDroppable<TData = unknown>( target: MaybeElementRef, options?: DroppableOptions<TData>,): DroppableReturn;Делает элемент целью броска.
const zone = useTemplateRef<HTMLElement>('zone');
const { isOver, isAccepting } = makeDroppable(zone, {
accept: 'image',
onDrop: (e) => move(e.active.id),
});
См. drag and drop и решение о броске.
Загружаем демо…
<script setup lang="ts">
import { reactive } from 'vue';
import { DnDProvider, type Key } from '@vue-dnd-kit/core';
import FileChip from './FileChip.vue';
import Zone from './Zone.vue';
import { FILES } from './files';
/** Which zone each file is in. */
const where = reactive<Record<string, string>>(Object.fromEntries(FILES.map((file) => [file.id, 'desk'])));
const filesIn = (zone: string) => FILES.filter((file) => where[file.id] === zone);
const move = (zone: string, file: Key) => (where[String(file)] = zone);
</script>
<template>
<DnDProvider>
<div class="zones">
<Zone title="Desktop" rule="takes anything" class="desk" @drop="move('desk', $event)">
<FileChip v-for="file in filesIn('desk')" :key="file.id" :file="file" />
</Zone>
<Zone title="Images" rule="accept: 'image'" accept="image" @drop="move('images', $event)">
<FileChip v-for="file in filesIn('images')" :key="file.id" :file="file" />
</Zone>
<Zone title="Media" rule="accept: ['image', 'audio']" :accept="['image', 'audio']" @drop="move('media', $event)">
<FileChip v-for="file in filesIn('media')" :key="file.id" :file="file" />
</Zone>
<Zone title="Archive" rule="disabled: true" disabled @drop="move('archive', $event)" />
</div>
</DnDProvider>
</template>
<style scoped>
.zones {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
width: min(720px, 100%);
}
.desk {
grid-column: 1 / -1;
}
@media (max-width: 560px) {
.zones {
grid-template-columns: minmax(0, 1fr);
}
}
</style>Опции
Опции makeDroppable.
Бросок в элемент. Цель на элементе сортируемого списка (или внутри него) работает как везде, с одним правилом, пока список этого элемента сортировал бы драг: она учитывается, только пока указатель в середине элемента (25–75 % по оси списка; по x в сетках), — там бросок попадает в цель, и список ради него не двигается. У краёв элемента список сортирует как обычно. Цель, чей accept отклоняет драг, пропускается, и список сортирует над элементом, как над любым другим (отключать её не нужно). Клавиатура останавливается на такой цели, прежде чем пройти мимо её элемента. Драг никогда не выбирает целью то, что несёт: ни цель в перетаскиваемом элементе (или на нём), ни цель в слоте, куда он приземляется. Чтобы в onDrop убрать элементы из их списка, вызовите e.source.remove().
Каждая опция, кроме колбэков, принимает значение, ref или геттер (accept, overOverlay, overDropAnimation — значение или ref) и читается вживую, пока драг ищет свою цель.
Keyзначение · ref · геттерПо умолчанию — useId(), совпадает при рендере на сервере и на клиенте.
TDataзначение · ref · геттерЛюбые сведения о цели: события передают их как over.data.
stringзначение · ref · геттерНазвание для людей: тексты для скринридеров называют его вместо id (over Trash); события передают его как over.label.
AcceptRuleзначение · refЧто принимает эта цель. Внутри элемента сортируемого списка цель, которая отклоняет драг, позволяет списку сортировать поверх неё. Значение или ref: функция — это правило.
AcceptModeзначение · ref · геттерПо умолчанию 'all'.
booleanзначение · ref · геттерtrue: драги проходят над ней, будто её нет.
numberзначение · ref · геттерКогда цели перекрываются без вложенности, побеждает большее значение (по умолчанию 0). Элементы сортируемых списков важнее контейнеров.
Componentзначение · refЧто показывает оверлей, пока над этой целью драг, который она принимает: компонент, получающий OverlayProps. Он рендерится вместо собственного оверлея драга (компонента перетаскиваемого элемента, слота провайдера или клона) и получает его как свой слот по умолчанию, чтобы обернуть или опустить (<slot />). Остаётся, пока бросок приземляется сюда. Драги без оверлея (overlay: false) так и остаются без него. Значение или ref, читается на лету; смена компонента анимируется по overlayTransition провайдера. (У перетаскиваемых элементов, элементов списков и списков overlay — это собственный оверлей драга; сортируемые списки и деревья тоже принимают эту опцию как overOverlay.)
DropAnimationзначение · refКак приземляется оверлей, когда его бросают сюда, вместо dropAnimation перетаскиваемого элемента и провайдера: false оставляет его там, где его бросили (там проигрывается собственная анимация компонента оверлея, например всплеск), функция анимирует его. Значение или ref, читается при броске.
(event: DnDEvent) => voidДраг оказался над этой целью — принимает она его или нет (event.over.accepted).
(event: DnDEvent) => voidДраг покинул эту цель.
(event: DnDEvent) => MaybePromise<BeforeDropResult>Вызывается, прежде чем бросок на эту цель пройдёт, после onBeforeDrop мониторов, если цель принимает драг (см. BeforeDropResult). Может быть асинхронным: оверлей ждёт там, где его бросили. Ошибка отклоняет бросок.
(event: DnDEndEvent) => voidБросок на эту цель прошёл: сделайте то, что он означает (переместите элемент, загрузите файл). Если onBeforeDrop принял только часть перетаскиваемых элементов, в event.accepted — их id, а в event.rejected — остальные, которые улетают обратно; active — по-прежнему весь драг.
ExternalAcceptзначение · ref · геттерПринимает драги извне страницы: файлы с рабочего стола, ссылку или текст из другого приложения или вкладки (собственный drag and drop браузера). Они работают так же, как драги библиотеки (isOver, isAccepting, события), а при броске их данные — в e.external. Цели без external их игнорируют. Значение, ref или геттер, читается вживую.
Возвращает
Что возвращает makeDroppable.
ComputedRef<Key>Id цели: опция id или созданный для неё id.
ComputedRef<boolean>Над ней драг (с external — и драг извне страницы).
ComputedRef<boolean>Что-то перетаскивается, и эта цель это принимает.
ComputedRef<Placement | null>Положение указателя относительно половин цели, пока на неё наведён драг.
Правила accept
'*' или отсутствие правила — принимается всё. Элементы без типа подходят к любому строковому правилу (как groups: [] в v2).
type AcceptRule = | '*' | string | string[] | ((context: AcceptContext) => boolean)С чем вызывается правило accept, заданное функцией.
'all': подходить должен каждый перетаскиваемый элемент; 'some': хотя бы один (остальные можно отклонить в onBeforeDrop).
type AcceptMode = 'all' | 'some'Извне страницы
Что external принимает от драгов, которые приходят извне страницы, и что такой драг несёт
(e.external). См. файлы и другие приложения.
Что цель, список или дерево принимает от драгов, которые приходят извне страницы: файлы с рабочего стола, ссылку или текст из другого приложения или вкладки (external).
boolean | string | readonly string[] | ((file: ExternalFile) => boolean)Файлы: true принимает любые. Или как в <input accept>: MIME-типы (image/*, application/pdf) и расширения (.md), строкой через запятую или списком; расширения проверяются при броске. Или функция, которую спрашивают о каждом файле (false его отклоняет). Папки не принимаются никогда.
booleanНесколько файлов сразу (по умолчанию true); false отклоняет драг больше чем одного файла.
booleanСсылки (text/uri-list): адрес, перетащенный из другой вкладки, ссылка со страницы.
booleanОбычный текст (text/plain): выделение, перетащенное из другого приложения.
readonly string[]Другие MIME-типы, которые принимаются, ровно так, как их предлагают другие приложения.
Драг извне страницы (Active.external, DnDEvent.external). Пока его удерживают, браузер сообщает, что он несёт, но не сами данные: файлы, ссылки и текст приходят при броске (ready).
readonly string[]MIME-типы, которые он предлагает (Files, text/uri-list, text/plain, собственные типы приложения).
readonly string[]MIME-типы его файлов, по одному на файл ('', если браузер не может назвать тип).
readonly File[]При броске: файлы, которые принимает цель (без папок и отклонённых файлов).
readonly string[]При броске: его ссылки (text/uri-list).
stringПри броске: его обычный текст.
stringПри броске: его HTML.
(type: string) => stringПри броске: данные любого типа, который он предлагает ('' до броска и для типа, которого он не предлагает).
booleanЕго бросили: данные выше на месте.
stringЭлементы библиотеки, перетащенные из другого окна приложения (native): имя их группы сортируемых списков. Списки этой группы принимают их так, будто они пришли из одного из их собственных списков; они лежат в active.items.
Файл драга извне — в том виде, в каком о нём спрашивают ExternalAccept.files. Пока файлы держат над страницей, браузер сообщает только их типы: name и size приходят при броске.