拖拽目标节点能突出显示 #I48MQM

magic-editor/src/console/src/components/resources/magic-api-list.vue

@@ -32,6 +32,7 @@
             :style="{ 'padding-left': 17 * item.level + 'px' }"
             :title="(item.name || '') + '(' + (item.path || '') + ')'"
             class="ma-tree-item-header ma-tree-hover"
+            :dragtarget="dragging && draggableTargetItem === item"
             @click="bus.$emit('api-group-selected', item)"
             @dblclick="$set(item, 'opened', !item.opened)"
             @dragenter="e => draggable(item, e, 'dragenter')"
@@ -153,6 +154,7 @@ export default {
       draggableTargetItem: {},
       // 是否展示tree-loading
       showLoading: true,
+      dragging: false,
       // 缓存一个openId
       tmpOpenId: []
     }
@@ -764,9 +766,11 @@ export default {
           // 拖拽到某个元素上
         case 'dragenter':
           this.draggableTargetItem = item
+          this.dragging = true
           break
           // 结束拖拽
         case 'dragend':
+          this.dragging = false
           // 目标对象必须是分组
           if (this.draggableTargetItem.folder === true) {
             // 移动分组

magic-editor/src/console/src/components/resources/magic-function-list.vue

@@ -32,6 +32,7 @@
             :style="{ 'padding-left': 17 * item.level + 'px' }"
             :title="(item.name || '') + '(' + (item.path || '') + ')'"
             class="ma-tree-item-header ma-tree-hover"
+            :dragtarget="dragging && draggableTargetItem === item"
             @click="$set(item, 'opened', !item.opened)"
             @dragenter="e => draggable(item, e, 'dragenter')"
             @contextmenu.prevent="e => folderRightClickHandle(e, item)"
@@ -153,6 +154,7 @@ export default {
       draggableTargetItem: {},
       // 是否展示tree-loading
       showLoading: true,
+      dragging: false,
       // 缓存一个openId
       tmpOpenId: []
     }
@@ -733,9 +735,11 @@ export default {
           // 拖拽到某个元素上
         case 'dragenter':
           this.draggableTargetItem = item
+          this.dragging = true
           break
           // 结束拖拽
         case 'dragend':
+          this.dragging = false
           // 目标对象必须是分组
           if (this.draggableTargetItem.folder === true) {
             // 移动分组

magic-editor/src/console/src/components/resources/magic-resource.css

@@ -20,7 +20,9 @@
     /* padding-left: 17px; */
     white-space: nowrap;
 }
-
+.ma-tree-wrapper .ma-tree-item .ma-tree-item-header[dragtarget] label{
+    border-color: red;
+}
 .ma-tree-wrapper .ma-tree-hover:hover,
 .ma-tree-wrapper .ma-tree-select {
     background: var(--toolbox-list-hover-background);
@@ -54,8 +56,7 @@
 .ma-tree-wrapper label {
     color: var(--toolbox-list-label-color);
     display: inline-block;
-    height: 22px;
-    line-height: 22px;
+    border: 1px solid transparent;
 }
 
 .ma-tree-wrapper .ma-tree-toolbar-search {