From 5a843bf24a01442ccf01a31420119e84f1e33ecf Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Tue, 1 Oct 2024 02:41:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=9D=E8=AF=95=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=EF=BC=8C=E8=99=BD=E7=84=B6=E7=9B=AE?=
 =?UTF-8?q?=E5=89=8D=E5=B0=9A=E6=9C=AA=E5=AE=9E=E7=8E=B0=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  3 +++
 pnpm-lock.yaml                                | 19 ++++++++++++++
 src/components/miaoDraggableDiv.vue           | 25 +++++++++++++++++++
 src/main.ts                                   |  1 +
 .../components/miaoDirectoryItem.vue          | 15 ++++++-----
 5 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 src/components/miaoDraggableDiv.vue

diff --git a/package.json b/package.json
index b81fe78..8a55612 100644
--- a/package.json
+++ b/package.json
@@ -23,18 +23,21 @@
         "@codemirror/lang-vue": "^0.1.3",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.1",
+        "@types/sortablejs": "^1.15.8",
         "@vicons/ionicons5": "^0.12.0",
         "aes-js": "^3.1.2",
         "aplayer": "^1.10.1",
         "axios": "^1.7.3",
         "codemirror": "^6.0.1",
         "copy-to-clipboard": "^3.3.3",
+        "drag-drop-touch": "^1.3.1",
         "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "markdown-it": "^14.1.0",
         "naive-ui": "^2.39.0",
         "pdfjs-dist": "^4.5.136",
         "sass": "^1.77.8",
+        "sortablejs": "^1.15.3",
         "vue": "3.5.0",
         "vue-codemirror": "^6.1.1",
         "vue-draggable-plus": "^0.5.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c263c6e..eb93cd0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       '@codemirror/lang-yaml':
         specifier: ^6.1.1
         version: 6.1.1(@codemirror/view@6.33.0)
+      '@types/sortablejs':
+        specifier: ^1.15.8
+        version: 1.15.8
       '@vicons/ionicons5':
         specifier: ^0.12.0
         version: 0.12.0
@@ -59,6 +62,9 @@ importers:
       copy-to-clipboard:
         specifier: ^3.3.3
         version: 3.3.3
+      drag-drop-touch:
+        specifier: ^1.3.1
+        version: 1.3.1
       localforage:
         specifier: ^1.10.0
         version: 1.10.0
@@ -77,6 +83,9 @@ importers:
       sass:
         specifier: ^1.77.8
         version: 1.77.8
+      sortablejs:
+        specifier: ^1.15.3
+        version: 1.15.3
       vue:
         specifier: 3.5.0
         version: 3.5.0(typescript@5.5.4)
@@ -782,6 +791,9 @@ packages:
   downloadjs@1.4.7:
     resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}
 
+  drag-drop-touch@1.3.1:
+    resolution: {integrity: sha512-Q0/ZgsnW7VUjn+YqSnp1rvxjjPnZX5YLyVaw28einood+eTMcLzgOgHk8nyqIF9O18J68l+2htlEnbw5GsyTvQ==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -1169,6 +1181,9 @@ packages:
   smoothscroll@0.4.0:
     resolution: {integrity: sha512-sggQ3U2Un38b3+q/j1P4Y4fCboCtoUIaBYoge+Lb6Xg1H8RTIif/hugVr+ErMtIDpvBbhQfTjtiTeYAfbw1ZGQ==}
 
+  sortablejs@1.15.3:
+    resolution: {integrity: sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg==}
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -2090,6 +2105,8 @@ snapshots:
 
   downloadjs@1.4.7: {}
 
+  drag-drop-touch@1.3.1: {}
+
   emoji-regex@8.0.0: {}
 
   entities@4.5.0: {}
@@ -2532,6 +2549,8 @@ snapshots:
 
   smoothscroll@0.4.0: {}
 
+  sortablejs@1.15.3: {}
+
   source-map-js@1.2.0: {}
 
   source-map@0.7.4: {}
diff --git a/src/components/miaoDraggableDiv.vue b/src/components/miaoDraggableDiv.vue
new file mode 100644
index 0000000..87ed2c5
--- /dev/null
+++ b/src/components/miaoDraggableDiv.vue
@@ -0,0 +1,25 @@
+<template>
+    <div ref="divRef" @dragstart="onDs" :draggable="true">
+        <slot></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+// import Sortable from 'sortablejs'
+
+const emit = defineEmits<{
+    onDragStart: [e: DragEvent]
+}>()
+
+const divRef = ref<HTMLDivElement>()
+
+const onDs = (e: DragEvent) => {
+    emit('onDragStart', e)
+}
+
+onMounted(() => {
+})
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 01433bc..66c45b6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+// import 'drag-drop-touch'
 
 createApp(App).mount('#app')
diff --git a/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue b/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
index f1cb45b..a5c8747 100644
--- a/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
+++ b/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
+    <miao-draggable-div class="miao-item" :isDraggable="draggable" ref="itemRef" @on-drag-start="handleDragStart">
         <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
             <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
                 <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
@@ -15,7 +15,7 @@
                 </div>
             </div>
         </miaoContextMenu>
-    </div>
+    </miao-draggable-div>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +36,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
 import { NEllipsis } from 'naive-ui'
 import { DropdownOption } from 'naive-ui/es/dropdown';
+import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
 // import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
 // const miaoFetchApi = useMiaoFetchApi()
@@ -58,13 +59,15 @@ const emit = defineEmits<{
     download: []
     delete: []
     rename: []
-    dragStart: [event: DragEvent]
+    dragStart: [e: DragEvent]
     onSelected: []
     plugin: [plugin: string]
 }>()
 
 const mainRef = ref<HTMLDivElement>()
 
+const draggable = ref(true)
+
 // 使用ResizeObserver实现
 const clientWidth = ref<number>(666)
 
@@ -157,9 +160,8 @@ const Icon = computed(() => {
 
 const itemRef = ref()
 
-const handleDragStart = (event: DragEvent) => {
-    emit('dragStart', event)
-    // dataBus.set('dragData', [props.item])
+const handleDragStart = (e: DragEvent) => {
+    emit('dragStart', e)
 }
 
 onMounted(() => {
@@ -198,6 +200,7 @@ onBeforeUnmount(() => {
         align-items: center;
         transition: background-color 0.3s ease;
         overflow-x: hidden;
+
         .item-main-front {
             height: 100%;
             min-width: 10px;