From d89978a44f35ad1e9f99bac880aaad976912a911 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Tue, 1 Oct 2024 03:07:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=80=E4=B8=AA=E5=A6=A5=E5=8D=8F?=
 =?UTF-8?q?=E7=9A=84=E6=8B=96=E5=8A=A8=E6=96=B9=E6=A1=88=EF=BC=8C=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E7=94=A8=E7=94=A8=E5=BE=97=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/miaoDraggableDiv.vue             | 10 +++++++++-
 src/main.ts                                     |  2 +-
 .../components/miaoDirectoryItem.vue            | 17 ++++++++++++++---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/components/miaoDraggableDiv.vue b/src/components/miaoDraggableDiv.vue
index 87ed2c5..02fc8de 100644
--- a/src/components/miaoDraggableDiv.vue
+++ b/src/components/miaoDraggableDiv.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="divRef" @dragstart="onDs" :draggable="true">
+    <div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
         <slot></slot>
     </div>
 </template>
@@ -7,6 +7,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 // import Sortable from 'sortablejs'
+const props = defineProps<{
+    isDraggable: boolean
+}>()
 
 const emit = defineEmits<{
     onDragStart: [e: DragEvent]
@@ -19,6 +22,11 @@ const onDs = (e: DragEvent) => {
 }
 
 onMounted(() => {
+    divRef?.value?.addEventListener('dragstart', function (ev) {
+        var img = new Image();
+        img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
+        ev?.dataTransfer?.setDragImage(img, 0, 0);
+    })
 })
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index 66c45b6..eb72254 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-// import 'drag-drop-touch'
+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 a5c8747..2c90111 100644
--- a/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
+++ b/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
@@ -1,5 +1,5 @@
 <template>
-    <miao-draggable-div class="miao-item" :isDraggable="draggable" ref="itemRef" @on-drag-start="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>
@@ -13,6 +13,9 @@
                         {{ time }}
                     </div>
                 </div>
+                <miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable">
+                    <ReorderFourOutline></ReorderFourOutline>
+                </miao-draggable-div>
             </div>
         </miaoContextMenu>
     </miao-draggable-div>
@@ -30,7 +33,8 @@ import {
     LogoJavascript,
     LogoVue,
     PlayCircle,
-    Disc
+    Disc,
+    ReorderFourOutline,
 } from '@vicons/ionicons5'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
@@ -86,7 +90,6 @@ const time = computed(() => {
     )
 })
 
-// 是不是可以直接在这里面实现？
 // 应该将所有事件emit出去才对
 const handleDropdownSelect = (key: string) => {
     if (key === 'rename') {
@@ -242,6 +245,7 @@ onBeforeUnmount(() => {
             &-date {
                 user-select: none;
                 font-size: small;
+                text-wrap: nowrap;
             }
         }
 
@@ -289,4 +293,11 @@ onBeforeUnmount(() => {
         }
     }
 }
+
+.item-main-dragBtn {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 5px;
+}
 </style>