Документация/API
DragPreview и пропсы оверлея
Клон перетаскиваемого элемента для своих оверлеев, которые сами раскладывают несколько элементов, — и пропсы, которые получают компоненты оверлея.
Страница переведена ИИ и может содержать неточности. Читать английский оригинал
Загружаем демо…
<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider } from '@vue-dnd-kit/core';
import MediaList from './MediaList.vue';
const media = (kind: 'photo' | 'video', n: number, hue: number) => ({ id: `${kind[0]}${n}`, kind, hue });
const library = ref([
media('photo', 1, 200),
media('photo', 2, 30),
media('video', 1, 280),
media('photo', 3, 140),
media('photo', 4, 340),
media('video', 2, 90),
media('photo', 5, 250),
media('photo', 6, 10),
]);
const album = ref([media('photo', 7, 170)]);
</script>
<template>
<DnDProvider>
<div class="demo">
<MediaList id="library" v-model="library" title="Library" :columns="4" />
<!-- Takes photos only: over it with a video, `accepted` is false. -->
<MediaList id="album" v-model="album" title="Album · photos" :columns="3" photos-only />
</div>
</DnDProvider>
</template>
<style scoped>
.demo {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
align-content: flex-start;
gap: 14px;
/* Room above the lists for the overlay's caption, and below for the album to grow into:
the lists never move under the pointer. */
min-height: 300px;
padding-top: 24px;
}
</style>DragPreview
const DragPreview: Component<DragPreviewProps>;Стандартный клон одного перетаскиваемого элемента (см. DragPreviewProps). Свои оверлеи используют его, чтобы самим раскладывать несколько элементов; стандартный оверлей показывает с его помощью мульти-драг.
<script setup lang="ts">
import { DragPreview, type DragItem } from '@vue-dnd-kit/core';
defineProps<{ items: DragItem[] }>();
</script>
<template>
<div class="stack">
<DragPreview v-for="item in items.slice(0, 3)" :id="item.id" :key="item.id" />
</div>
</template>
Клоны снимаются в момент захвата: со взятого элемента и с соседних с ним в порядке броска,
столько, сколько задаёт overlayPreviews провайдера (по умолчанию 5). Для любого другого
элемента DragPreview рендерит свой слот по умолчанию или ничего. При броске каждое превью
летит на свой элемент; при броске в зону (папку, корзину) превью уходят в неё одно за другим. См.
руководство по оверлею.
Пропсы DragPreview — стандартного клона одного перетаскиваемого элемента — для своих оверлеев (компонент overlay или слот #overlay провайдера), которые сами раскладывают несколько элементов, например <DragPreview v-for="item in items" :key="item.id" :id="item.id" />.
Клоны снимаются при захвате: со взятого элемента и с соседних с ним в порядке броска, столько, сколько задаёт overlayPreviews провайдера (по умолчанию 5; с тех, что в этот момент отрендерены). Для любого другого элемента DragPreview рендерит свой слот по умолчанию в элементе, который принимает class и style, как элемент клона, или ничего, если слота нет. Клон заполняет элемент, которому при захвате инлайн задаётся размер перетаскиваемого элемента: меняйте его через style (:style="{ width: '100%', height: '100%' }"), он пробрасывается; классом этот размер не переопределить.
При мульти-драге в сортируемом списке (multiple: 'group' или 'gaps') превью элемента, отличного от взятого, вместе с броском приземляется на слот этого элемента (при отмене — обратно на его место), где бы его ни поставила раскладка: повороты и масштаб обёрток через transform по пути снимаются, а размер анимируется как ширина и высота. Стилизуйте само превью (углы, тень): его обёртки остаются в блоке. Элементы без клона вместо этого проявляются. При броске в зону (не в список) превью уходят в неё одно за другим, блок — последним.
KeyId перетаскиваемого элемента: один из items в OverlayProps.
Пропсы оверлея
Что получают компонент оверлея (опция overlay у перетаскиваемых элементов, элементов
сортируемых списков, списков и деревьев) и слот #overlay провайдера.
Что показывает оверлей: пропсы слота #overlay провайдера и компонентов оверлея (опция overlay у перетаскиваемых элементов, элементов сортируемых списков, списков и деревьев).
ActiveДраг.
DragItem[]Все перетаскиваемые элементы, основной — первым: один оверлей на весь мульти-драг.
Over | nullЦель под драгом. Пока решённый бросок анимируется — цель, на которую он приземляется (какой она была в момент броска); null, пока отменённый драг улетает обратно.
booleanПринимает ли over перетаскиваемые элементы; false, если под драгом ничего нет.
DnDStatus'dragging', затем 'dropping', пока оверлей приземляется (или летит обратно).
DragModeЧто сделал бы бросок сейчас (см. DnDEvent.mode): например, чтобы показать плюс, пока он копирует.
DropDestination | nullКуда бросок положил бы перетаскиваемые элементы сейчас, в сортируемом списке или дереве: например, окрасьте оверлей по папке, в которую попал бы драг в дереве. Вне всех целей — место слота, где их оставляет dropOutside: 'placeholder' (по умолчанию). null, когда бросок не положил бы их ни в какой список: над обычной целью броска, над списком, который их отклоняет, вне целей с dropOutside: 'cancel' или 'remove'. Пока решённый бросок анимируется — место, куда он приземляется.
Пропсы компонента оверлея, для defineProps<OverlayProps>().
Компонент рендерится внутри блока оверлея, который следует за размером слота (overlayFit: 'slot') и анимирует его при броске. Задайте корню width: 100% (и height: 100%), чтобы следовать этому размеру; с фиксированным размером компонент сохраняет свой.
type OverlayProps = OverlaySlotPropsКуда бросок положил бы перетаскиваемые элементы: место в сортируемом списке или дереве, как скажет to события броска (проп to оверлея, на лету).