function makeSortableItem<TData = unknown>( target: MaybeElementRef, options: SortableItemOptions<TData>,): SortableItemReturn;요소를 정렬 가능한 리스트나 트리의 행으로 만듭니다. 이 행은 드래그되고, 자리를 만들고, 자기 자리에 안착합니다. makeSortableList(또는 makeSortableTree)를 호출한 컴포넌트 안에서 렌더링되는 컴포넌트에서 호출하세요. 그곳에서 리스트를 여러 개 만들었다면, 행은 자신을 감싸는 요소를 가진 가장 안쪽 리스트에 들어갑니다. 행은 item(리스트의 getKey로 key를 정하며, 기본값은 item.id) 또는 id로 식별합니다.
const el = useTemplateRef<HTMLElement>('el');
const { isPlaceholder, index } = makeSortableItem(el, { item: () => props.task, handle: '.grip' });
정렬 가능한 리스트를 참고하세요.
데모 불러오는 중…
<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가 우선합니다). 정렬용 key는 데이터에서 와야 합니다. 자동 생성 id는 컴포넌트가 다시 만들어질 때마다(다른 리스트로 옮겨지거나 가상 리스트가 재활용할 때) 바뀌어, 드래그가 항목을 잃어버립니다.
canDrag를 제외한 옵션은 값, ref, getter를 받으며(overlay, dropAnimation: 값 또는 ref), makeDraggable에서와 같은 의미입니다. keyboardMode는 없습니다. 키보드는 정렬 가능한 항목을 자리 단위로 옮깁니다.
Key값 · ref · getter리스트 안에서 항목의 key. getter를 쓰면 가상 리스트에서도 최신 값을 유지합니다.
unknown값 · ref · getter이 요소가 렌더링하는 항목. 예: () => props.task. key는 소속 리스트(또는 트리)의 getKey에서 오며, 기본값은 item.id입니다.
Component값 · ref이 항목의 오버레이 컴포넌트. 리스트의 overlay보다 우선합니다. 드래그 중에 바꾼 ref는 바로 교체됩니다.
DropAnimation값 · ref이 항목의 드래그가 끝날 때 오버레이가 안착하는 방식. 리스트의 dropAnimation보다 우선합니다. 드롭할 때 읽습니다.
Modifier[]값 · ref · getter이 항목의 드래그에 적용할 모디파이어. 프로바이더의 모디파이어 다음에 적용되며, 리스트의 modifiers보다 우선합니다.
'x' | 'y'값 · ref · getter이 항목의 드래그를 한 축('x', 'y')에 고정합니다. 리스트의 axis보다 우선합니다.
MaybeElement | string값 · ref · getter항목 안에서 드래그를 시작하는(그리고 속성을 받는) 요소 또는 선택자.
boolean값 · ref · gettertrue: 이 항목을 드래그할 수 없습니다(비활성화된 리스트의 모든 항목처럼).
string | string[]값 · ref · getter이 항목의 타입(하나 또는 여러 개). group.put 규칙과 드롭 대상의 accept에 쓰입니다. 기본값: 리스트 그룹의 이름.
TData값 · ref · getter드래그가 담아 갈 아무 데이터. 이벤트와 드롭 대상은 이것을 active.data로 읽습니다.
string값 · ref · getter사람이 항목을 부르는 이름. 스크린 리더용 문구가 key 대신 이 이름을 읽습니다(Picked up Tomato at position 2 of 5 in Garden). 이벤트에서는 active.label과 items에 담겨 전달됩니다.
ActivationOptions값 · ref · getter리스트(또는 트리)와 프로바이더의 activation을 재정의합니다. 누르기가 시작될 때 읽습니다.
(event: PointerEvent | KeyboardEvent) => boolean추가 관문. 예: 키를 누르고 있을 때만 드래그.
boolean값 · ref · getterrole/tabindex/aria-* 속성을 설정합니다(기본값 true). 사용자가 직접 지정한 속성은 덮어쓰지 않습니다. 실시간: 끄면 라이브러리가 설정한 것을 제거합니다.
boolean | NativeDragOptions값 · ref · getter이 항목의 마우스 드래그가 브라우저 자체의 드래그가 되어 페이지를 떠날 수 있습니다(DraggableOptions.native 참고). 항목 자체도 담아 갑니다. 앱의 다른 창에 있는 같은 그룹의 리스트가 그 항목을 받으며, 받으면 항목은 이 리스트를 떠납니다('move').
반환값
makeSortableItem이 반환하는 것.
ComputedRef<boolean>이 항목이 드래그되는 중이거나(멀티 드래그의 다른 항목에서도 true), 오버레이가 아직 안착하는 중입니다.
ComputedRef<boolean>이 요소가 드래그 중인 항목이 안착할 자리입니다. 활성 항목의 자리, 그리고 멀티 드래그 'group' 모드에서는 함께 이동하는 항목들의 자리입니다.
WritableComputedRef<boolean>프로바이더의 선택에 들어 있습니다. 선택된 항목 하나를 드래그하면 모두 함께 옮겨집니다. 값을 설정해 선택하거나 선택 해제하세요.
ComputedRef<SortableIndicator | null>인디케이터 모드: 리스트의 indicator가 이 항목에 붙어 있는 동안에는 그 값, 아니면 null. side는 선이 들어갈 위치를 알려 주고, 트리에서는 depth와 parentKey가 드롭이 안착할 위치를 알려 줍니다(side: 'inside': 이 항목 안으로).
ComputedRef<number>렌더링된 초안에서의 인덱스. 알 수 없으면 -1.