전체가 실제로 동작하는 모습입니다. 행을 드래그하거나, Tab으로 행에 이동해 Space를 누르고, 화살표 키로 옮긴 다음 Space를 다시 누르세요.
Live
데모 불러오는 중…
<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import TaskList from './TaskList.vue';
</script>
<template>
<!-- The provider goes around the components that drag (often the whole app). -->
<DnDProvider>
<TaskList />
</DnDProvider>
</template>단계별로
앱을 프로바이더로 감싸기
DnDProvider가 드래그를 관리합니다. 모든 컴포저블은 프로바이더 안에서 렌더링되는 컴포넌트에서
실행되어야 합니다. 템플릿에 프로바이더를 직접 포함한 컴포넌트에서는 안 됩니다.
리스트 만들기
makeSortableList는 리스트 요소와 배열을 받습니다. 반환값 items는 드래그하는 동안 실시간으로
순서가 바뀌는 초안입니다. 원본 배열이 아니라 초안을 렌더링하고, 행의 key는 id로 지정하세요.
행 만들기
각 행은 자신의 요소와 렌더링하는 항목을 넘겨 makeSortableItem을 호출합니다. 행의 key는
item.id에서 가져옵니다.
드롭이 끝나면 tasks에 새 순서가 들어갑니다. 평범한 ref이므로 앱의 다른 부분도 다른 변경과
똑같이 이 변화를 봅니다.
Pinia, 서버, 불변 데이터를 사용한다면 ref 대신 getter를 넘기고,
onDrop에서 e.preventDefault()를
호출한 뒤 e.result를 직접 적용하세요.