From f4ad49fd50a5a2584395e9a39a07863bb629d340 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 25 Aug 2022 22:27:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=95=BF=E6=8C=89=E7=BC=A9=E7=95=A5=E5=9B=BE=E5=90=8E?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=B0=83=E6=95=B4=E9=A1=BA=E5=BA=8F=EF=BC=88?=
 =?UTF-8?q?#130=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useSlideHandler.ts          | 13 ++++++++
 src/views/Editor/Thumbnails/index.vue | 10 ++----
 src/views/Mobile/MobileThumbnails.vue | 44 +++++++++++++++++++++------
 3 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useSlideHandler.ts b/src/hooks/useSlideHandler.ts
index eb2c3f2b..cbe11d08 100644
--- a/src/hooks/useSlideHandler.ts
+++ b/src/hooks/useSlideHandler.ts
@@ -138,6 +138,18 @@ export default () => {
     mainStore.updateSelectedSlidesIndex(newSelectedSlidesIndex)
   }
 
+  // 拖拽调整幻灯片顺序同步数据
+  const sortSlides = (newIndex: number, oldIndex: number) => {
+    if (oldIndex === newIndex) return
+  
+    const _slides = JSON.parse(JSON.stringify(slides.value))
+    const _slide = _slides[oldIndex]
+    _slides.splice(oldIndex, 1)
+    _slides.splice(newIndex, 0, _slide)
+    slidesStore.setSlides(_slides)
+    slidesStore.updateSlideIndex(newIndex)
+  }
+
   return {
     resetSlides,
     updateSlideIndex,
@@ -149,5 +161,6 @@ export default () => {
     deleteSlide,
     cutSlide,
     selectAllSlide,
+    sortSlides,
   }
 }
\ No newline at end of file
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index c01a224b..524d49fd 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -81,6 +81,7 @@ const {
   deleteSlide,
   cutSlide,
   selectAllSlide,
+  sortSlides,
 } = useSlideHandler()
 
 // 切换页面
@@ -153,14 +154,7 @@ const setThumbnailsFocus = (focus: boolean) => {
 // 拖拽调整顺序后进行数据的同步
 const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
   const { newIndex, oldIndex } = eventData
-  if (oldIndex === newIndex) return
-
-  const _slides = JSON.parse(JSON.stringify(slides.value))
-  const _slide = _slides[oldIndex]
-  _slides.splice(oldIndex, 1)
-  _slides.splice(newIndex, 0, _slide)
-  slidesStore.setSlides(_slides)
-  slidesStore.updateSlideIndex(newIndex)
+  sortSlides(newIndex, oldIndex)
 }
 
 const { enterScreening, enterScreeningFromStart } = useScreening()
diff --git a/src/views/Mobile/MobileThumbnails.vue b/src/views/Mobile/MobileThumbnails.vue
index 5d97a4be..4c74936f 100644
--- a/src/views/Mobile/MobileThumbnails.vue
+++ b/src/views/Mobile/MobileThumbnails.vue
@@ -1,15 +1,28 @@
 <template>
   <div class="mobile-thumbnails">
-    <div
-      class="thumbnail-item"
-      v-for="(slide, index) in slides"
-      :key="slide.id"
-      :class="{ 'active': slideIndex === index }"
-      @click="changeSlideIndex(index)"
+    <Draggable 
+      class="thumbnail-list"
+      :modelValue="slides"
+      :animation="300"
+      :scroll="true"
+      :scrollSensitivity="50"
+      :setData="null"
+      itemKey="id"
+      :delayOnTouchOnly="true"
+      :delay="800"
+      @end="handleDragEnd"
     >
-      <div class="label">{{ index + 1 }}</div>
-      <ThumbnailSlide class="thumbnail" :slide="slide" :size="120" :visible="index < slidesLoadLimit" />
-    </div>
+      <template #item="{ element, index }">
+        <div
+          class="thumbnail-item"
+          :class="{ 'active': slideIndex === index }"
+          @click="changeSlideIndex(index)"
+        >
+          <div class="label">{{ index + 1 }}</div>
+          <ThumbnailSlide class="thumbnail" :slide="element" :size="120" :visible="index < slidesLoadLimit" />
+        </div>
+      </template>
+    </Draggable>
   </div>
 </template>
 
@@ -17,16 +30,26 @@
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import useLoadSlides from '@/hooks/useLoadSlides'
+import useSlideHandler from '@/hooks/useSlideHandler'
 
+import Draggable from 'vuedraggable'
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
 const slidesStore = useSlidesStore()
 const { slides, slideIndex } = storeToRefs(slidesStore)
 
+const { sortSlides } = useSlideHandler()
+
 const { slidesLoadLimit } = useLoadSlides()
 const changeSlideIndex = (index: number) => {
   slidesStore.updateSlideIndex(index)
 }
+
+// 拖拽调整顺序后进行数据的同步
+const handleDragEnd = (eventData: { newIndex: number; oldIndex: number }) => {
+  const { newIndex, oldIndex } = eventData
+  sortSlides(newIndex, oldIndex)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -67,6 +90,9 @@ const changeSlideIndex = (index: number) => {
     padding: 0 5px;
   }
 }
+.sortable-chosen {
+  top: -5px;
+}
 
 ::-webkit-scrollbar {
   width: 0;