feat: support swap and multiDrag

docs/.vitepress/sidebar.ts

@@ -17,7 +17,9 @@ export const sidebar = {
         { text: 'Mixin Animation', link: '/en/demo/transitions/' },
         { text: 'Table Row', link: '/en/demo/table/' },
         { text: 'Table Column', link: '/en/demo/table-column/' },
-        { text: 'Nesting', link: '/en/demo/nested/' }
+        { text: 'Nesting', link: '/en/demo/nested/' },
+        { text: 'Swap', link: '/en/demo/swap/' },
+        { text: 'Multi Drag', link: '/en/demo/multi-drag/' }
       ]
     },
     {
@@ -47,7 +49,9 @@ export const sidebar = {
         { text: '内置动画合并', link: '/demo/transitions/' },
         { text: '表格行拖拽', link: '/demo/table/' },
         { text: '表格列拖拽', link: '/demo/table-column/' },
-        { text: '嵌套', link: '/demo/nested/' }
+        { text: '嵌套', link: '/demo/nested/' },
+        { text: '交换', link: '/demo/swap/' },
+        { text: '多选拖拽', link: '/demo/multi-drag/' }
       ]
     },
     {

src/__docs__/multi-drag/demo.vue

@@ -0,0 +1,83 @@
+<template>
+  <button @click="start">start</button>
+  <button @click="pause">pause</button>
+  <div class="flex">
+    <VueDraggable
+      ref="el"
+      v-model="list"
+      :animation="150"
+      ghostClass="ghost"
+      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
+      :multiDrag="true"
+      selectedClass="bg-red"
+      :fallbackTolerance="2"
+      @start="onStart"
+      @update="onUpdate"
+      @end="onEnd"
+    >
+      <div
+        v-for="item in list"
+        :key="item.id"
+        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
+      >
+        {{ item.name }}
+      </div>
+    </VueDraggable>
+    <preview-list :list="list" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  type DraggableEvent,
+  type UseDraggableReturn,
+  VueDraggable
+} from 'vue-draggable-plus'
+const list = ref([
+  {
+    name: 'Joao',
+    id: 1
+  },
+  {
+    name: 'Jean',
+    id: 2
+  },
+  {
+    name: 'Johanna',
+    id: 3
+  },
+  {
+    name: 'Juan',
+    id: 4
+  }
+])
+
+const el = ref<UseDraggableReturn>()
+function pause() {
+  el.value?.pause()
+}
+
+function start() {
+  el.value?.start()
+}
+
+const onStart = (e: DraggableEvent) => {
+  console.log('start', e)
+}
+
+const onEnd = (e: DraggableEvent) => {
+  console.log('onEnd', e)
+}
+
+const onUpdate = () => {
+  console.log('update')
+}
+</script>
+
+<style scoped>
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

src/__docs__/multi-drag/directive.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="flex">
+    <ul
+      v-draggable="[
+        list,
+        {
+          animation: 150,
+          ghostClass: 'ghost',
+          multiDrag: true,
+          selectedClass: 'bg-red',
+          fallbackTolerance: 2,
+          onUpdate,
+          onStart
+        }
+      ]"
+      class="target-directive flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
+    >
+      <li
+        v-for="item in list"
+        :key="item.id"
+        class="h-30 bg-gray-500/5 rounded p-3 cursor-move"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+    <preview-list :list="list" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vDraggable } 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() {
+  console.log('start')
+}
+
+function onUpdate() {
+  console.log('update')
+}
+</script>
+
+<style scoped>
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

src/__docs__/multi-drag/function.vue

@@ -0,0 +1,64 @@
+<template>
+  <button @click="start()">start</button>
+  <button @click="pause()">pause</button>
+  <div class="flex">
+    <div
+      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
+      ref="el"
+    >
+      <div
+        v-for="item in list"
+        :key="item.id"
+        class="h-30 bg-gray-500/5 rounded p-3 cursor-move"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <preview-list :list="list" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDraggable } from 'vue-draggable-plus'
+const list = ref([
+  {
+    name: 'Joao',
+    id: 1
+  },
+  {
+    name: 'Jean',
+    id: 2
+  },
+  {
+    name: 'Johanna',
+    id: 3
+  },
+  {
+    name: 'Juan',
+    id: 4
+  }
+])
+const el = ref()
+
+const { start, pause } = useDraggable(el, list, {
+  animation: 150,
+  ghostClass: 'ghost',
+  multiDrag: true,
+  selectedClass: 'bg-red',
+  fallbackTolerance: 2,
+  onStart() {
+    console.log('start')
+  },
+  onUpdate() {
+    console.log('update')
+  }
+})
+</script>
+
+<style scoped>
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

src/__docs__/multi-drag/index.en-US.md

@@ -0,0 +1,30 @@
+---
+map:
+ path: /demo/multi-drag
+---
+
+# Basic Usage
+
+Allow selecting multiple items within a sortable at once, and drag them as one item. Once placed, the items will unfold into their original order, but all beside each other at the new position.
+
+## Component Usage
+
+<demo src="./demo.vue"
+title="component usage"
+desc="">
+</demo>
+
+
+## Function Usage
+<demo src="./function.vue"
+title="function usage"
+desc="">
+</demo>
+
+
+## Directive Usage
+
+<demo src="./directive.vue"
+title="directive usage"
+desc="">
+</demo>

src/__docs__/multi-drag/index.zh-CN.md

@@ -0,0 +1,30 @@
+---
+map:
+ path: /demo/multi-drag
+---
+
+# 基础使用
+
+允许一次选择可排序项中的多个选项，并将它们作为一个选项拖动。一旦放置，这些选项将按原始顺序展开，但在新的位置上会并排放置。
+
+## 组件使用
+
+<demo src="./demo.vue"
+title="组件使用"
+desc="">
+</demo>
+
+
+## 函数使用
+<demo src="./function.vue"
+title="函数使用"
+desc="">
+</demo>
+
+
+## 指令使用
+
+<demo src="./directive.vue"
+title="指令使用"
+desc="">
+</demo>

src/__docs__/swap/demo.vue

@@ -0,0 +1,83 @@
+<template>
+  <button @click="start">start</button>
+  <button @click="pause">pause</button>
+  <div class="flex">
+    <VueDraggable
+      ref="el"
+      v-model="list"
+      :animation="150"
+      ghostClass="ghost"
+      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
+      :swap="true"
+      swapClass="bg-red"
+      @start="onStart"
+      @update="onUpdate"
+      @end="onEnd"
+    >
+      <div
+        v-for="item in list"
+        :key="item.id"
+        class="cursor-move h-30 bg-gray-500/5 rounded p-3"
+      >
+        {{ item.name }}
+      </div>
+    </VueDraggable>
+    <preview-list :list="list" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  type DraggableEvent,
+  type UseDraggableReturn,
+  VueDraggable
+} from 'vue-draggable-plus'
+const list = ref([
+  {
+    name: 'Joao',
+    id: 1
+  },
+  {
+    name: 'Jean',
+    id: 2
+  },
+  {
+    name: 'Johanna',
+    id: 3
+  },
+  {
+    name: 'Juan',
+    id: 4
+  }
+])
+
+const el = ref<UseDraggableReturn>()
+
+function start() {
+  el.value?.start()
+}
+
+function pause() {
+  el.value?.pause()
+}
+
+const onStart = (e: DraggableEvent) => {
+  console.log('start', e)
+}
+
+const onEnd = (e: DraggableEvent) => {
+  console.log('onEnd', e)
+}
+
+const onUpdate = () => {
+  console.log('update')
+}
+</script>
+
+<style scoped>
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>