VueDraggablePlus

https://vue-draggable-plus.pages.dev/
Admin
VueDraggablePlus is a fully-featured, strongly-typed drag-and-drop component for Vue 2 and Vue 3,...
Tokens:10,688
Snippets:51
Trust Score:7.2
Update:2 months ago
Show doc for...
Tokens:
Raw
### Handle drag events with v-on

Source: https://vue-draggable-plus.pages.dev/api

Demonstrates how to bind drag start and end events to a VueDraggable component using v-on directives.

```vue
<template>
  <VueDraggable v-model="list" @start="onStart" @end="onEnd">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { VueDraggable, DraggableEvent } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])

function onStart(event: DraggableEvent) {
  console.log('开始拖拽')
}

function onEnd(event: DraggableEvent) {
  console.log('拖拽结束')
}
</script>
```

--------------------------------

### Implementing TransitionGroup with Draggable

Source: https://vue-draggable-plus.pages.dev/demo/transitions

A complete Vue component example showing the integration of TransitionGroup with useDraggable to handle drag animations and list sorting.

```vue
<template>
  <button @click="sort">还原</button>
  <div class="flex justify-between">
    <TransitionGroup
      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
      ref="el"
      type="transition"
      tag="ul"
      :name="!drag ? 'fade' : undefined"
    >
      <li
        v-for="item in list"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
      >
        {{ item.name }}
      </li>
    </TransitionGroup>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const drag = ref(false)

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
const el = ref()

useDraggable(el, list, {
  animation: 150,
  onStart() {
    drag.value = true
  },
  onEnd() {
    console.log('onEnd')
    nextTick(() => {
      drag.value = false
    })
  }
})

const sort = () => {
  list.value.sort((a, b) => a.id - b.id)
}
</script>

<style>
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.fade-leave-active {
  position: absolute;
}
</style>
```

--------------------------------

### Implement Drag-and-Drop Cloning

Source: https://vue-draggable-plus.pages.dev/demo/clone

Vue component setup using useDraggable to configure cloning between two lists with specific group and pull settings.

```vue
<template>
  <div class="flex">
    <section
      ref="el1"
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      ref="el2"
      class="flex flex-col gap-2 p-4 w-300px m-auto bg-gray-500/5 rounded overflow-auto"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

const el1 = ref()
const el2 = ref()
useDraggable(el1, list1, {
  animation: 150,
  group: { name: 'people', pull: 'clone', put: false },
  sort: false,
  onClone() {
    console.log('clone')
  }
})
useDraggable(el2, list2, { animation: 150, group: 'people' })
</script>
```

--------------------------------

### Implement Nested Draggable Component

Source: https://vue-draggable-plus.pages.dev/demo/nested

Parent component setup using the NestedDirective to manage a recursive list.

```vue
<template>
  <div class="flex justify-between">
    <NestedDirective v-model="list" class="w-full"></NestedDirective>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NestedDirective from './NestedDirective.vue'

const list = ref([
  {
    name: 'item 1',
    children: [
      {
        name: 'item 2',
        children: []
      }
    ]
  },
  {
    name: 'item 3',
    children: [
      {
        name: 'item 4',
        children: []
      }
    ]
  },
  {
    name: 'item 5',
    children: []
  }
])
</script>
```

--------------------------------

### VueDraggable Component Events

Source: https://vue-draggable-plus.pages.dev/api

Events starting with 'on' can be passed to the VueDraggable component using the v-on directive.

```APIDOC
## VueDraggable Events

### Description
All event functions starting with 'on' can be bound to the component using the v-on (@) syntax.

### Usage Example
```html
<VueDraggable v-model="list" @start="onStart" @end="onEnd">
  <div v-for="item in list" :key="item.id">
    {{ item.name }}
  </div>
</VueDraggable>
```
```

--------------------------------

### 组件方式实现嵌套拖拽

Source: https://vue-draggable-plus.pages.dev/demo/nested

通过 Vue 组件递归实现嵌套拖拽，使用 v-model 进行双向绑定。

```vue
<template>
  <div class="flex justify-between">
    <nested-draggable v-model="list" class="w-full"></nested-draggable>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NestedDraggable from './NestedComponent.vue'

const list = ref([
  {
    name: 'item 1',
    children: [
      {
        name: 'item 2',
        children: []
      }
    ]
  },
  {
    name: 'item 3',
    children: [
      {
        name: 'item 4',
        children: []
      }
    ]
  },
  {
    name: 'item 5',
    children: []
  }
])
</script>
```

```vue
<template>
  <VueDraggable class="drag-area" tag="ul" v-model="list" group="g1">
    <li v-for="el in modelValue" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-component v-model="el.children" />
    </li>
  </VueDraggable>
</template>
<script setup lang="ts">
import { VueDraggable } from 'vue-draggable-plus'
import { computed } from 'vue'

interface IList {
  name: string
  children: IList[]
}

interface Props {
  modelValue: IList[]
}

const props = defineProps<Props>()

interface Emits {
  (e: 'update:modelValue', value: IList[]): void
}

const emits = defineEmits<Emits>()
const list = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})
</script>
<style scoped>
.drag-area {
  min-height: 50px;
  outline: 1px dashed;
}
</style>
```

--------------------------------

### 实现组件式组合过渡

Source: https://vue-draggable-plus.pages.dev/demo/transitions

结合 VueDraggable 和 TransitionGroup 实现拖拽排序动画，并在还原时触发过渡效果。

```vue
<template>
  <button @click="sort">还原</button>
  <div class="flex justify-between">
    <VueDraggable
      v-model="list"
      :animation="150"
      target=".sort-target"
      class="flex flex-col gap-2 pr-4 w-300px bg-gray-500/5 rounded"
      @start="onStart"
      @end="onEnd"
    >
      <TransitionGroup
        type="transition"
        tag="ul"
        :name="!drag ? 'fade' : undefined"
        class="sort-target"
      >
        <li
          v-for="item in list"
          :key="item.id"
          class="cursor-move h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
        >
          {{ item.name }}
        </li>
      </TransitionGroup>
    </VueDraggable>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const drag = ref(false)

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  drag.value = true
}
function onEnd() {
  console.log('onEnd')
  nextTick(() => {
    drag.value = false
  })
}
function sort() {
  list.value.sort((a, b) => a.id - b.id)
}
</script>

<style>
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.fade-leave-active {
  position: absolute;
}
</style>
```

--------------------------------

### Options Configuration

Source: https://vue-draggable-plus.pages.dev/api

Configuration options inherited from Sortablejs that define the behavior of the drag-and-drop functionality.

```APIDOC
## Options

### Description
Configuration options inherited from Sortablejs. These define drag behavior, animations, group settings, and event callbacks.

### Key Parameters
- **animation** (Number) - Drag animation duration in ms (default: 0).
- **group** (Group) - Group name for drag-and-drop between lists.
- **disabled** (Boolean) - Whether to disable dragging (default: false).
- **sort** (Boolean) - Whether to allow sorting within the list (default: true).
- **onStart** (Function) - Callback when dragging starts.
- **onEnd** (Function) - Callback when dragging ends.
```

--------------------------------

### Define initial list data

Source: https://vue-draggable-plus.pages.dev/demo/transition

Initial JSON structure for the draggable list items.

```json
[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]
```

--------------------------------

### 实现拖拽克隆组件

Source: https://vue-draggable-plus.pages.dev/demo/clone

使用 VueDraggable 组件配置 group 属性实现克隆逻辑。

```vue
<template>
  <div class="flex">
    <VueDraggable
      v-model="list1"
      :animation="150"
      :group="{ name: 'people', pull: 'clone', put: false }"
      :sort="false"
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
      @clone="onClone"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable
      v-model="list2"
      :animation="150"
      group="people"
      class="flex flex-col gap-2 p-4 w-300px m-auto bg-gray-500/5 rounded overflow-auto"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

function onClone() {
  console.log('clone')
}
</script>
```

--------------------------------

### Implement cloning with v-draggable

Source: https://vue-draggable-plus.pages.dev/demo/clone

A Vue component demonstrating the use of v-draggable with a clone configuration, including the onClone callback.

```vue
<template>
  <div class="flex">
    <section
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
      v-draggable="[
        list1,
        {
          animation: 150,
          group: { name: 'people', pull: 'clone', put: false },
          sort: false,
          onClone
        }
      ]"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      class="flex flex-col gap-2 p-4 w-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-draggable="[list2, { animation: 150, group: 'people' }]"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

function onClone() {
  console.log('clone')
}
</script>
```

--------------------------------

### 函数方式实现嵌套拖拽

Source: https://vue-draggable-plus.pages.dev/demo/nested

通过 useDraggable 函数实现嵌套拖拽，适用于更灵活的控制需求。

```vue
<template>
  <div class="flex justify-between">
    <NestedFunction v-model="list" class="w-full"></NestedFunction>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NestedFunction from './NestedFunction.vue'

const list = ref([
  {
    name: 'item 1',
    children: [
      {
        name: 'item 2',
        children: []
      }
    ]
  },
  {
    name: 'item 3',
    children: [
      {
        name: 'item 4',
        children: []
      }
    ]
  },
  {
    name: 'item 5',
    children: []
  }
])
</script>
```

```vue
<template>
  <ul class="drag-area" ref="el">
    <li v-for="el in modelValue" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-function v-model="el.children" />
    </li>
  </ul>
</template>
<script setup lang="ts">
import { useDraggable } from 'vue-draggable-plus'
import { computed, ref } from 'vue'

interface IList {
  name: string
  children: IList[]
}

interface Props {
  modelValue: IList[]
}

const props = defineProps<Props>()
interface Emits {
  (e: 'update:modelValue', value: IList[]): void
}
const emits = defineEmits<Emits>()
const list = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})

const el = ref()
useDraggable(el, list, {
  group: 'g1'
})
</script>
<style scoped>
.drag-area {
  min-height: 50px;
  outline: 1px dashed;
}
</style>
```

--------------------------------

### 实现自定义克隆组件

Source: https://vue-draggable-plus.pages.dev/demo/custom-clone

使用 VueDraggable 组件的 clone 属性定义克隆逻辑，并配置 group 属性以支持克隆操作。

```vue
<template>
  <div class="flex">
    <VueDraggable
      v-model="list1"
      :animation="150"
      ghostClass="ghost"
      :group="{ name: 'people', pull: 'clone', put: false }"
      :clone="clone"
      :sort="false"
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable
      v-model="list2"
      :animation="150"
      group="people"
      ghostClass="ghost"
      class="flex flex-col gap-2 p-4 w-300px max-h-350px m-auto bg-gray-500/5 rounded overflow-auto"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

function clone(element: Record<'name' | 'id', string>) {
  const len = list2.value.length
  return {
    name: `${element.name}-clone-${len}`,
    id: `${element.id}-clone-${len}`
  }
}
</script>
```

--------------------------------

### Implement Custom Clone Logic

Source: https://vue-draggable-plus.pages.dev/demo/custom-clone

Vue component demonstrating the use of the clone callback within useDraggable to transform dragged items.

```vue
<template>
  <div class="flex">
    <section
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
      ref="el1"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      class="flex flex-col gap-2 p-4 w-300px max-h-350px m-auto bg-gray-500/5 rounded overflow-auto"
      ref="el2"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'

const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

const el1 = ref()
const el2 = ref()
useDraggable(el1, list1, {
  animation: 150,
  group: {
    name: 'people',
    pull: 'clone',
    put: false
  },
  sort: false,
  clone(element: Record<'name' | 'id', string>) {
    const len = list2.value.length
    return {
      name: `${element.name}-clone-${len}`,
      id: `${element.id}-clone-${len}`
    }
  }
})
useDraggable(el2, list2, {
  animation: 150,
  group: 'people'
})
</script>
```

--------------------------------

### Two Lists Data (List 1)

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Initial data structure for the first list. This JSON represents the items that will be displayed and made draggable.

```json
[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]
```

--------------------------------

### 定义拖拽列表数据

Source: https://vue-draggable-plus.pages.dev/demo/transitions

包含名称和唯一标识符的初始列表数据结构。

```json
[
  {
    "name": "Joao",
    "id": 1
  },
  {
    "name": "Jean",
    "id": 2
  },
  {
    "name": "Johanna",
    "id": 3
  },
  {
    "name": "Juan",
    "id": 4
  }
]
```

--------------------------------

### Two Lists Data (List 2)

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Initial data structure for the second list, derived from the first list with modified names and IDs. This ensures distinct items for the second list.

```json
[
  {
    "name": "Joao-2",
    "id": "1-2"
  },
  {
    "name": "Jean-2",
    "id": "2-2"
  },
  {
    "name": "Johanna-2",
    "id": "3-2"
  },
  {
    "name": "Juan-2",
    "id": "4-2"
  }
]
```

--------------------------------

### Implement Custom Clone with v-draggable

Source: https://vue-draggable-plus.pages.dev/demo/custom-clone

Vue component implementation using v-draggable with a custom clone function to handle element duplication between lists.

```vue
<template>
  <div class="flex">
    <section
      class="flex flex-col gap-2 p-4 w-300px bg-gray-500/5 rounded"
      v-draggable="[
        list1,
        {
          animation: 150,
          group: {
            name: 'people',
            pull: 'clone',
            put: false
          },
          sort: false,
          clone
        }
      ]"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      class="flex flex-col gap-2 p-4 w-300px max-h-350px m-auto bg-gray-500/5 rounded overflow-auto"
      v-draggable="[
        list2,
        {
          animation: 150,
          group: 'people'
        }
      ]"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'

const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

function clone(element: Record<'name' | 'id', string>) {
  const len = list2.value.length
  return {
    name: `${element.name}-clone-${len}`,
    id: `${element.id}-clone-${len}`
  }
}
</script>
```

--------------------------------

### Implement draggable transition component

Source: https://vue-draggable-plus.pages.dev/demo/transitions

A Vue component using TransitionGroup and v-draggable to enable animated drag-and-drop reordering.

```vue
<template>
  <button @click="sort">还原</button>
  <div class="flex justify-between">
    <TransitionGroup
      v-draggable="[list, { animation: 150, onStart, onEnd }]"
      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
      type="transition"
      tag="ul"
      :name="!drag ? 'fade' : undefined"
    >
      <li
        v-for="item in list"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
      >
        {{ item.name }}
      </li>
    </TransitionGroup>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
const drag = ref(false)

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  drag.value = true
}
function onEnd() {
  console.log('onEnd')
  nextTick(() => {
    drag.value = false
  })
}

function sort() {
  list.value.sort((a, b) => a.id - b.id)
}
</script>

<style>
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.fade-leave-active {
  position: absolute;
}
</style>
```

--------------------------------

### 嵌套数据结构示例

Source: https://vue-draggable-plus.pages.dev/demo/nested

用于嵌套拖拽组件的数据模型，包含名称和子项列表。

```json
[
  {
    "name": "item 1",
    "children": [
      {
        "name": "item 2",
        "children": []
      }
    ]
  },
  {
    "name": "item 3",
    "children": [
      {
        "name": "item 4",
        "children": []
      }
    ]
  },
  {
    "name": "item 5",
    "children": []
  }
]
```

--------------------------------

### TypeScript Type Definitions for Options

Source: https://vue-draggable-plus.pages.dev/api

Type definitions for group configuration, easing functions, and scroll callbacks used in Sortablejs options.

```typescript
type Easing =
  | 'steps(int, start | end)'
  | 'cubic-bezier(n, n, n, n)'
  | 'linear'
  | 'ease'
  | 'ease-in'
  | 'ease-out'
  | 'ease-in-out'
  | 'step-start'
  | 'step-end'
  | 'initial'
  | 'inherit'

type PullResult = ReadonlyArray<string> | boolean | 'clone'
type PutResult = ReadonlyArray<string> | boolean

interface GroupOptions {
  /**
   * 组名
   */
  name: string
  /**
   * 从列表中移动的能力。克隆——复制项目，而不是移动。
   */
  pull?: PullResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) => PullResult) | undefined;
  /**
   * 是否可以从其他列表中添加元素，或者可以从中获取元素的组名数组。
   */
  put?: PutResult | ((to: Sortable, from: Sortable, dragEl: HTMLElement, event: SortableEvent) => PutResult) | undefined;
  /**
   * 移动到另一个列表后，将克隆的元素恢复到初始位置。
   */
  revertClone?: boolean | undefined
}

type Group = string | GroupOptions | undefined

type ScrollFn =
  | ((
      this: Sortable,
      offsetX: number,
      offsetY: number,
      originalEvent: Event,
      touchEvt: TouchEvent,
      hoverTargetEl: HTMLElement
    ) => 'continue' | void)
  | undefined
```

--------------------------------

### 定义克隆列表数据

Source: https://vue-draggable-plus.pages.dev/demo/clone

用于演示拖拽克隆的初始列表数据结构。

```json
[
  {
    "name": "Joao",
    "id": "1"
  },
  {
    "name": "Jean",
    "id": "2"
  },
  {
    "name": "Johanna",
    "id": "3"
  },
  {
    "name": "Juan",
    "id": "4"
  }
]
```

```json
[
  {
    "name": "Joao-2",
    "id": "1-2"
  },
  {
    "name": "Jean-2",
    "id": "2-2"
  },
  {
    "name": "Johanna-2",
    "id": "3-2"
  },
  {
    "name": "Juan-2",
    "id": "4-2"
  }
]
```

--------------------------------

### Function Usage for Two List Drag and Drop

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Implements drag and drop sorting between two lists using the useDraggable composable function. Ensure the 'group' option is set to enable cross-list interactions.

```html
<template>
  <div class="flex">
    <section
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      ref="el1"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
    <section
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      ref="el2"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </section>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)

const el1 = ref()
const el2 = ref()

useDraggable(el1, list1, {
  animation: 150,
  ghostClass: 'ghost',
  group: 'people',
  onUpdate: () => {
    console.log('update list1')
  },
  onAdd: () => {
    console.log('add list1')
  },
  remove: () => {
    console.log('remove list1')
  }
})

useDraggable(el2, list2, {
  animation: 150,
  ghostClass: 'ghost',
  group: 'people',
  onUpdate: () => {
    console.log('update list2')
  },
  onAdd: () => {
    console.log('add list2')
  },
  remove: () => {
    console.log('remove list2')
  }
})
</script>
```

--------------------------------

### useDraggable Return Interface

Source: https://vue-draggable-plus.pages.dev/api

The interface for the object returned by the useDraggable hook, providing control methods for the drag-and-drop instance.

```APIDOC
## UseDraggableReturn Interface

### Description
Defines the methods available on the object returned by the useDraggable hook.

### Methods
- **start(target?: HTMLElement)**: Starts the drag operation. If target is not provided, it defaults to the component root element.
- **pause()**: Pauses the drag operation.
- **resume()**: Resumes the drag operation.
- **closest()**: Sortable method.
- **save()**: Sortable method.
- **toArray()**: Sortable method.
- **destroy()**: Sortable method.
- **option()**: Sortable method.
```

--------------------------------

### Component Usage for Two List Drag and Drop

Source: https://vue-draggable-plus.pages.dev/demo/tow-list

Implements drag and drop sorting between two lists using the VueDraggable component. Configure the 'group' prop to enable cross-list dragging.

```html
<template>
  <div class="flex">
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list1"
      animation="150"
      ghostClass="ghost"
      group="people"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div
        v-for="item in list1"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
    <VueDraggable
      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
      v-model="list2"
      animation="150"
      group="people"
      ghostClass="ghost"
      @update="onUpdate"
      @add="onAdd"
      @remove="remove"
    >
      <div
        v-for="item in list2"
        :key="item.id"
        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
      >
        {{ item.name }}
      </div>
    </VueDraggable>
  </div>
  <div class="flex justify-between">
    <preview-list :list="list1" />
    <preview-list :list="list2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
  {
    name: 'Joao',
    id: '1'
  },
  {
    name: 'Jean',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref(
  list1.value.map(item => ({
    name: `${item.name}-2`,
    id: `${item.id}-2`
  }))
)
function onUpdate() {
  console.log('update')
}
function onAdd() {
  console.log('add')
}
function remove() {
  console.log('remove')
}
</script>
```

--------------------------------

### Define TypeScript interfaces for draggable

Source: https://vue-draggable-plus.pages.dev/api

Provides the core TypeScript interfaces for the useDraggable return values, options, and event structures.

```ts
type SortableMethod = 'closest' | 'save' | 'toArray' | 'destroy' | 'option'

/**
 * useDraggable 返回值
 */
export interface UseDraggableReturn extends Pick<Sortable, SortableMethod> {
  /**
   * 启动拖拽
   * @param {HTMLElement} target - 指定拖拽的元素
   * @default - 组件根元素，参考 [指定目标容器](/demo/target-container/)，默认为组件根元素
   */
  start: (target?: HTMLElement) => void
  /**
   * 暂停拖拽
   */
  pause: () => void
  /**
   * 恢复拖拽
   */
  resume: () => void
}

export interface UseDraggableOptions<T> extends Options {
  clone?: (element: T) => T
  immediate?: boolean
  customUpdate?: (event: DraggableEvent) => void
}

interface DraggableEvent<T = any> extends DraggableEvent {
  data: T
  clonedData: T
}
```

--------------------------------

### Component Props

Source: https://vue-draggable-plus.pages.dev/api

The Vue Draggable Plus component accepts various props to control its behavior and rendering, including all Sortablejs options.

```APIDOC
## Component Props

### Description
Properties that can be passed to the Vue Draggable Plus component to configure its behavior and data binding.

### Parameters
- **modelValue** (Array) - Required - The list to be bound via v-model.
- **tag** (String) - Optional - The HTML tag name for the root element (default: 'div').
- **target** (HTMLElement/String) - Optional - Specifies the target container for the draggable elements.
```

--------------------------------

### Create Recursive NestedDirective Component

Source: https://vue-draggable-plus.pages.dev/demo/nested

A recursive Vue component that applies v-draggable to nested lists.

```vue
<template>
  <ul v-draggable="[list, { group: 'g1' }]" class="drag-area">
    <li v-for="el in modelValue" :key="el.name">
      <p>{{ el.name }}</p>
      <nested-directive v-model="el.children" />
    </li>
  </ul>
</template>
<script setup lang="ts">
import { vDraggable } from 'vue-draggable-plus'
import { computed } from 'vue'

interface IList {
  name: string
  children: IList[]
}

interface Props {
  modelValue: IList[]
}

const props = defineProps<Props>()
interface Emits {
  (e: 'update:modelValue', value: IList[]): void
}
const emits = defineEmits<Emits>()
const list = computed({
  get: () => props.modelValue,
  set: value => emits('update:modelValue', value)
})
</script>
<style scoped>
.drag-area {
  min-height: 50px;
  outline: 1px dashed;
}
</style>
```
Tokens:
Raw