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

makeSortableItem

Регистрирует строку сортируемого списка или дерева — она перетаскивается, освобождает место и приземляется в свой слот.

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

function makeSortableItem<TData = unknown>(  target: MaybeElementRef,  options: SortableItemOptions<TData>,): SortableItemReturn;

Делает элемент строкой сортируемого списка или дерева: она перетаскивается, освобождает место и приземляется в свой слот. Вызывайте его в компоненте, отрендеренном внутри того, который вызвал makeSortableList (или makeSortableTree); если там создано несколько списков, строка относится к самому внутреннему из них, чей DOM-элемент её содержит. Указывайте строку через item (ключ даёт getKey списка, по умолчанию item.id) или id.

const el = useTemplateRef<HTMLElement>('el');
const { isPlaceholder, index } = makeSortableItem(el, { item: () => props.task, handle: '.grip' });

См. сортируемые списки.

Live Перетащите строку за ручку: чекбокс по-прежнему работает

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

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

<template>
  <DnDProvider>
    <TodoList />
  </DnDProvider>
</template>

Опции

Передайте id или item (если заданы оба, важнее id). Ключи элементов сортируемого списка должны браться из данных: автоматический id менялся бы при каждом пересоздании компонента (перенос в другой список, переиспользование виртуальным списком), и драг терял бы элемент.

Опции, кроме canDrag, принимают значение, ref или геттер (overlay, dropAnimation — значение или ref) и значат то же, что в makeDraggable. Опции keyboardMode нет: клавиатура двигает элемент сортируемого списка по слотам.

id?

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

Ключ элемента в его списке. Геттер поддерживает его актуальным в виртуальных списках.

item?

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

Элемент данных, который рендерит этот DOM-элемент, например () => props.task. Его ключ берётся из getKey списка (или дерева), которому он принадлежит; по умолчанию — item.id.

overlay?

Componentзначение · ref

Компонент оверлея для этого элемента; важнее overlay списка. Ref, переключённый посреди драга, сразу его меняет.

dropAnimation?

DropAnimationзначение · ref

Как приземляется оверлей, когда заканчивается драг этого элемента; важнее dropAnimation списка. Читается при броске.

modifiers?

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

Модификаторы для драгов этого элемента, после модификаторов провайдера; важнее modifiers списка.

axis?

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

Фиксирует драги этого элемента по одной оси ('x', 'y'); важнее axis списка.

handle?

MaybeElement | stringзначение · ref · геттер

Элемент или селектор внутри элемента списка, который начинает драг (и получает атрибуты).

disabled?

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

true: элемент нельзя перетащить (как и любой элемент отключённого списка).

type?

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

Его тип или типы — для правил group.put и accept целей. По умолчанию: имя группы его списка.

data?

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

Всё, что должен нести драг: события и цели читают это как active.data.

label?

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

Название элемента для людей: тексты для скринридеров называют его вместо ключа (Picked up Tomato at position 2 of 5 in Garden). События передают его как active.label и в items.

activation?

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

Переопределяет activation своего списка (или дерева) и провайдера. Читается в начале нажатия.

canDrag?

(event: PointerEvent | KeyboardEvent) => boolean

Дополнительное условие, например перетаскивать только при зажатой клавише.

attributes?

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

Выставлять атрибуты role/tabindex/aria-* (по умолчанию true), никогда не перезаписывая ваши собственные. Работает на лету: при выключении убирается то, что выставила библиотека.

native?

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

Драг мышью — это собственный драг браузера, который может покинуть страницу (см. DraggableOptions.native). Он несёт и сам элемент: его принимают списки его группы в другом окне приложения, и когда один из них принимает его, элемент покидает этот список ('move').

Возвращает

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

isDragging

ComputedRef<boolean>

Этот элемент перетаскивают (верно и для остальных элементов мульти-драга), или его оверлей ещё приземляется.

isPlaceholder

ComputedRef<boolean>

Этот элемент — слот, куда приземлится перетаскиваемый элемент: слот активного элемента, а в режиме мульти-драга 'group' — слоты элементов, которые едут вместе с ним.

selected

WritableComputedRef<boolean>

Он в выделении провайдера: драг одного выделенного элемента несёт их все. Присвойте значение, чтобы выделить или снять выделение.

indicator

ComputedRef<SortableIndicator | null>

Режим индикатора: indicator списка, пока он привязан к этому элементу, иначе null. side говорит, где рисуется линия; в деревьях depth и parentKey говорят, куда приземлится бросок (side: 'inside' — внутрь этого элемента).

index

ComputedRef<number>

Индекс в отрендеренном черновике; -1, если неизвестен.