fix: 恢复 vuedraggable （#189）

2025-04-15 02:20:00 +08:00 · 2023-03-29 23:54:15 +08:00 · 2023-03-29 23:54:15 +08:00 · dfed24dc0a
commit dfed24dc0a
parent 0b6c8c04b4
6 changed files with 63 additions and 136 deletions
--- 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",
--- 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",
--- a/src/components/Sortable.vue
+++ b/src/components/Sortable.vue
@ -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>
--- 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)
--- 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

--- 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)