feat: 支持移动端长按缩略图后拖拽调整顺序（#130）

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,
   }
 }

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
+  sortSlides(newIndex, oldIndex)
-
-  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)
 }
 
 const { enterScreening, enterScreeningFromStart } = useScreening()

src/views/Mobile/MobileThumbnails.vue

@@ -1,15 +1,28 @@
 <template>
   <div class="mobile-thumbnails">
-    <div
+    <Draggable 
-      class="thumbnail-item"
+      class="thumbnail-list"
-      v-for="(slide, index) in slides"
+      :modelValue="slides"
-      :key="slide.id"
+      :animation="300"
-      :class="{ 'active': slideIndex === index }"
+      :scroll="true"
-      @click="changeSlideIndex(index)"
+      :scrollSensitivity="50"
+      :setData="null"
+      itemKey="id"
+      :delayOnTouchOnly="true"
+      :delay="800"
+      @end="handleDragEnd"
     >
-      <div class="label">{{ index + 1 }}</div>
+      <template #item="{ element, index }">
-      <ThumbnailSlide class="thumbnail" :slide="slide" :size="120" :visible="index < slidesLoadLimit" />
+        <div
-    </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;