feat: 一个妥协的拖动方案，暂时用用得了

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>
 

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')

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>