From dfed24dc0adc65b8f1fc13c7ce167773f5d94773 Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Wed, 29 Mar 2023 23:54:15 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=20vuedraggable=20?= =?UTF-8?q?=EF=BC=88#189=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 45 +++++++--- package.json | 4 +- src/components/Sortable.vue | 86 ------------------- src/views/Editor/Thumbnails/index.vue | 19 ++-- .../Editor/Toolbar/ElementAnimationPanel.vue | 22 +++-- src/views/Mobile/MobileThumbnails.vue | 23 +++-- 6 files changed, 63 insertions(+), 136 deletions(-) delete mode 100644 src/components/Sortable.vue 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 @@ - - - \ 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 @@ - @@ -40,7 +38,7 @@ - +
幻灯片 {{slideIndex + 1}} / {{slides.length}}
@@ -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 @@ - @@ -111,7 +109,7 @@ - + @@ -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 @@ - + @@ -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)