diff --git a/package-lock.json b/package-lock.json
index 5b18655e..10aaba0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,11 +37,11 @@
         "prosemirror-state": "^1.4.1",
         "prosemirror-view": "^1.27.2",
         "register-service-worker": "^1.7.2",
-        "sortablejs": "^1.15.0",
         "svg-arc-to-cubic-bezier": "^3.2.0",
         "svg-pathdata": "^6.0.0",
         "tinycolor2": "^1.6.0",
-        "vue": "^3.2.47"
+        "vue": "^3.2.47",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@commitlint/cli": "^17.4.4",
@@ -13185,11 +13185,6 @@
         "websocket-driver": "^0.7.4"
       }
     },
-    "node_modules/sortablejs": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
-      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
-    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -14911,6 +14906,22 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
+    "node_modules/vuedraggable/node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
@@ -25803,11 +25814,6 @@
         "websocket-driver": "^0.7.4"
       }
     },
-    "sortablejs": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
-      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w=="
-    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -27105,6 +27111,21 @@
         "is-plain-object": "3.0.1"
       }
     },
+    "vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "requires": {
+        "sortablejs": "1.14.0"
+      },
+      "dependencies": {
+        "sortablejs": {
+          "version": "1.14.0",
+          "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+          "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+        }
+      }
+    },
     "w3c-keyname": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
diff --git a/package.json b/package.json
index 333bf588..07f8cb82 100644
--- a/package.json
+++ b/package.json
@@ -38,11 +38,11 @@
     "prosemirror-state": "^1.4.1",
     "prosemirror-view": "^1.27.2",
     "register-service-worker": "^1.7.2",
-    "sortablejs": "^1.15.0",
     "svg-arc-to-cubic-bezier": "^3.2.0",
     "svg-pathdata": "^6.0.0",
     "tinycolor2": "^1.6.0",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.4",
diff --git a/src/components/Sortable.vue b/src/components/Sortable.vue
deleted file mode 100644
index b26e5142..00000000
--- a/src/components/Sortable.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <div ref="containerRef" :class="$props.class">
-    <slot 
-      v-for="(item, index) in list" 
-      :key="item[props.itemKey]" 
-      :element="item" 
-      :index="index" 
-      name="item"
-    ></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, PropType, watch, onUnmounted } from 'vue'
-import Sortable, { SortableOptions, SortableEvent } from 'sortablejs'
-import type { AutoScrollOptions } from 'sortablejs/plugins'
-
-type SortableOptionsProp = SortableOptions | AutoScrollOptions
-
-const props = defineProps({
-  options: {
-    type: Object as PropType<SortableOptionsProp>,
-    default: () => ({}),
-  },
-  list: {
-    /* eslint-disable @typescript-eslint/no-explicit-any */
-    type: Array as PropType<any[]>,
-    required: true,
-  },
-  itemKey: {
-    type: String,
-    required: true,
-  },
-})
-
-const emit = defineEmits<{
-  (event: 'start', payload: SortableEvent): void
-  (event: 'end', payload: SortableEvent): void
-  (event: 'add', payload: SortableEvent): void
-  (event: 'remove', payload: SortableEvent): void
-  (event: 'update', payload: SortableEvent): void
-}>()
-
-const isDragging = ref(false)
-const containerRef = ref<HTMLElement | null>(null)
-const sortable = ref<Sortable | null>(null)
-
-watch(containerRef, container => {
-  if (container) {
-    sortable.value = new Sortable(container, {
-      ...props.options,
-      onStart: event => {
-        isDragging.value = true
-        emit('start', event)
-      },
-      onEnd: event => {
-        setTimeout(() => {
-          isDragging.value = false
-          emit('end', event)
-        })
-      },
-      onAdd: event => emit('add', event),
-      onRemove: event => emit('remove', event),
-      onUpdate: event => emit('update', event),
-    })
-  }
-})
-
-watch(() => props.options, options => {
-  if (options && sortable.value) {
-    for (const key in options) {
-      const name = key as keyof SortableOptionsProp
-      const value = options[key as keyof SortableOptionsProp]
-      sortable.value.option(name, value)
-    }
-  }
-})
-
-onUnmounted(() => {
-  if (sortable.value) {
-    sortable.value.destroy()
-    containerRef.value = null
-    sortable.value = null
-  }
-})
-</script>
\ No newline at end of file
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index c874743a..c1f4d5d5 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -15,14 +15,12 @@
       </Popover>
     </div>
 
-    <Sortable 
+    <Draggable 
       class="thumbnail-list"
-      :list="slides"
-      :options="{
-        animation: 200,
-        scroll: true,
-        scrollSensitivity: 50,
-      }"
+      :modelValue="slides"
+      :animation="200"
+      :scroll="true"
+      :scrollSensitivity="50"
       @end="handleDragEnd"
       itemKey="id"
     >
@@ -40,7 +38,7 @@
           <ThumbnailSlide class="thumbnail" :slide="element" :size="120" :visible="index < slidesLoadLimit" />
         </div>
       </template>
-    </Sortable>
+    </Draggable>
 
     <div class="page-number">幻灯片 {{slideIndex + 1}} / {{slides.length}}</div>
   </div>
@@ -56,10 +54,9 @@ import useSlideHandler from '@/hooks/useSlideHandler'
 import useScreening from '@/hooks/useScreening'
 import useLoadSlides from '@/hooks/useLoadSlides'
 
-import { SortableEvent } from 'sortablejs'
-import Sortable from '@/components/Sortable.vue'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import LayoutPool from './LayoutPool.vue'
+import Draggable from 'vuedraggable'
 import { Popover } from 'ant-design-vue'
 
 const mainStore = useMainStore()
@@ -155,7 +152,7 @@ const setThumbnailsFocus = (focus: boolean) => {
 }
 
 // 拖拽调整顺序后进行数据的同步
-const handleDragEnd = (eventData: SortableEvent) => {
+const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
   const { newIndex, oldIndex } = eventData
   if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
   sortSlides(newIndex, oldIndex)
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 331fc9c4..4846e81b 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -52,15 +52,13 @@
     
     <Divider />
 
-    <Sortable 
+    <Draggable 
       class="animation-sequence"
-      :list="animationSequence"
-      :options="{
-        animation: 200,
-        scroll: true,
-        scrollSensitivity: 50,
-        handle: '.sequence-content',
-      }"
+      :modelValue="animationSequence"
+      :animation="200"
+      :scroll="true"
+      :scrollSensitivity="50"
+      handle=".sequence-content"
       itemKey="id"
       @end="handleDragEnd"
     >
@@ -111,7 +109,7 @@
           </div>
         </div>
       </template>
-    </Sortable>
+    </Draggable>
   </div>
 </template>
 
@@ -132,8 +130,8 @@ import {
 import { ELEMENT_TYPE_ZH } from '@/configs/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import { SortableEvent } from 'sortablejs'
-import Sortable from '@/components/Sortable.vue'
+
+import Draggable from 'vuedraggable'
 import {
   InputNumber,
   Divider,
@@ -227,7 +225,7 @@ const deleteAnimation = (id: string) => {
 }
 
 // 拖拽修改动画顺序后同步数据
-const handleDragEnd = (eventData: SortableEvent) => {
+const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
   const { newIndex, oldIndex } = eventData
   if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
 
diff --git a/src/views/Mobile/MobileThumbnails.vue b/src/views/Mobile/MobileThumbnails.vue
index 3f78593b..c99a91cc 100644
--- a/src/views/Mobile/MobileThumbnails.vue
+++ b/src/views/Mobile/MobileThumbnails.vue
@@ -1,15 +1,13 @@
 <template>
   <div class="mobile-thumbnails">
-    <Sortable 
+    <Draggable 
       class="thumbnail-list"
-      :list="slides"
-      :options="{
-        animation: 200,
-        scroll: true,
-        scrollSensitivity: 50,
-        delayOnTouchOnly: true,
-        delay: 800,
-      }"
+      :modelValue="slides"
+      :animation="200"
+      :scroll="true"
+      :scrollSensitivity="50"
+      :delayOnTouchOnly="true"
+      :delay="800"
       itemKey="id"
       @end="handleDragEnd"
     >
@@ -23,7 +21,7 @@
           <ThumbnailSlide class="thumbnail" :slide="element" :size="120" :visible="index < slidesLoadLimit" />
         </div>
       </template>
-    </Sortable>
+    </Draggable>
   </div>
 </template>
 
@@ -33,8 +31,7 @@ import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
 import useSlideHandler from '@/hooks/useSlideHandler'
 
-import { SortableEvent } from 'sortablejs'
-import Sortable from '@/components/Sortable.vue'
+import Draggable from 'vuedraggable'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
 const slidesStore = useSlidesStore()
@@ -48,7 +45,7 @@ const changeSlideIndex = (index: number) => {
 }
 
 // 拖拽调整顺序后进行数据的同步
-const handleDragEnd = (eventData: SortableEvent) => {
+const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
   const { newIndex, oldIndex } = eventData
   if (newIndex === undefined || oldIndex === undefined || newIndex === oldIndex) return
   sortSlides(newIndex, oldIndex)