fixed code

packages/components/tree/node.vue

@@ -1,14 +1,4 @@
 <template>
-<div>
-<div :style="{ marginLeft: parentLevel * 10 + 'px' }" :class="[
-        {
-        'ps-tree-drag-in':
-            dataSourceKey != data.key &&
-            dataSourceKey &&
-            !isChildOf(data.key, dataSourceKey, list) &&
-            status === ENiuTreeStatus.DragInner,
-    },
-]"></div>
     <div class="ps-tree-node component" :class="[{ draging: status === ENiuTreeStatus.DragIng }]">
         <div class="ps-tree-node-wrapper" ref="nodeEL" :draggable="draggable" @dragstart.stop="onDragstart"
             @dragend.stop="onDragend" @drop.stop="onDrop" @dragover.stop="onDragover" @dragleave.stop="onDragleave"
@@ -22,7 +12,7 @@
                     {{ data.title }} - {{ level * 10 + 'px' }}
                 </div>
             </slot>
-            <div :style="{ marginLeft: level * 10 + 'px' }" :class="[
+            <div v-if="!opts.sort" :style="{ marginLeft: level * 10 + 'px' }" :class="[
                 {
                     'ps-tree-drag-up':
                         dataSourceKey != data.key &&
@@ -42,21 +32,17 @@
                 },
             ]"></div>
         </div>
+        <div v-if="opts.sort && dda.parentKey.value == data.key" :style="{ marginLeft: level * 10 + 'px' }"
+            class="ps-tree-drag-in"></div>
         <div class="ps-tree-sub-node" v-if="(opts.justOpen || data.isExpand) && data.children && data.children.length">
             <template v-for="(item, index) in sortedList" :key="item.key">
-                <node
-                    @onDragstart="(e: INiuTreeKey)=>emit('onDragstart', e)"
+                <node @onDragstart="(e: INiuTreeKey) => emit('onDragstart', e)"
                     @onDragend="(e: INiuTreeKey) => emit('onDragend', e)"
                     @onDrop="(e: INiuTreeKey, s?: ENiuTreeStatus) => emit('onDrop', e, s)"
                     @onDragover="(e: INiuTreeKey) => emit('onDragover', e)"
                     @onDragleave="(e: INiuTreeKey) => emit('onDragleave', e)"
-                    @expand="(e: INiuTreeData)=>emit('expand', e)"
-                    @click="(e: INiuTreeData)=>emit('click', e)"
-                    :data-source-key="dataSourceKey"
-                    :data="item"
-                    :list="list"
-                    :level="level + 1"
-                >
+                    @expand="(e: INiuTreeData) => emit('expand', e)" @click="(e: INiuTreeData) => emit('click', e)"
+                    :data-source-key="dataSourceKey" :data="item" :list="list" :level="level + 1">
                     <!-- <template #default="{data, deep, dataSourceKey, status}: {data: INiuTreeData, deep: number, dataSourceKey:INiuTreeKey, status:ENiuTreeStatus}"> -->
                     <template #default="fuck">
                         <aa v-bind="fuck"></aa>
@@ -67,12 +53,11 @@
             </template>
         </div>
     </div>
-</div>
 </template>
 
 <script lang="ts" setup>
 // import node from './node.vue'
-import { inject, ref, provide, renderSlot, useSlots, watch, readonly, computed } from 'vue'
+import { inject, ref, provide, renderSlot, useSlots, watch, readonly, computed, Ref } from 'vue'
 import { findByKeyParent, isChildOf } from './util'
 import renderNode from './renderNode'
 import type { INiuTreeData, INiuTreeKey } from './type'
@@ -115,7 +100,9 @@ const aa = (fuck: any)=>renderSlot(slots, "default", fuck)
 watch(() => props.data.isExpand, () => {
     emit("expand", props.data)
 })
-
+const dda = inject<{
+    parentKey: Ref<INiuTreeKey>
+}>("tree:data")
 const opts = inject("tree:opts", {
     justOpen: false,
     sort: false,
@@ -134,6 +121,7 @@ const status = ref<ENiuTreeStatus>()
 const nodeEL = ref<HTMLDivElement>()
 provide("draggable", draggable)
 function onDragstart(event: DragEvent) {
+    dda.parentKey.value = undefined
     // 开始拖拽
     if (event.dataTransfer) {
         event.dataTransfer.dropEffect = 'move'
@@ -154,6 +142,7 @@ function onDragstart(event: DragEvent) {
     }
 }
 function onDragend() {
+    dda.parentKey.value = undefined
     // 结束拖拽
     let clone = document.getElementById('dragging_node')
     clone?.remove()
@@ -161,6 +150,7 @@ function onDragend() {
     emit('onDragend', props.data.key)
 }
 function onDrop(e: DragEvent) {
+    dda.parentKey.value = undefined
     e.preventDefault()
     emit('onDrop', props.data.key, status.value)
     status.value = undefined
@@ -177,6 +167,7 @@ function onDragover(event: DragEvent) {
         return
     const y = event.offsetY
     const h = (event.currentTarget as HTMLDivElement).offsetHeight
+    let activeKey = undefined
     if (!opts.sort) {
         if (y < h / 3) {
             status.value = ENiuTreeStatus.DragUp
@@ -188,21 +179,28 @@ function onDragover(event: DragEvent) {
             status.value = undefined
         }
     } else {
+        const parentSource = findByKeyParent(props.dataSourceKey, props.list)
+        const parentData = findByKeyParent(props.data.key, props.list)
         if (props.data.children) {
             status.value = ENiuTreeStatus.DragIn
+            activeKey = props.data.key
         } else if (!props.data.children && opts.sort) {
-            const parentSource = findByKeyParent(props.dataSourceKey, props.list)
-            const parentData = findByKeyParent(props.data.key, props.list)
             if (parentSource && parentData && parentSource.key !== parentData.key) {
+                activeKey = parentData.key
                 status.value = ENiuTreeStatus.DragInner
             } else if (parentSource != parentData) {
+                if (parentData) {
+                    activeKey = parentData.key
+                }
                 status.value = ENiuTreeStatus.DragInner
             }
         }
+        dda.parentKey.value = activeKey
     }
     emit('onDragover', props.data.key)
 }
 function onDragleave() {
+    dda.parentKey.value = undefined
     if (!props.dataSourceKey) return
     if (props.dataSourceKey === props.data.key) return
     if (

packages/components/tree/tree.vue

@@ -98,6 +98,9 @@ const props = withDefaults(
 const slot = useSlots()
 
 provide("tree:opts", props)
+provide("tree:data", {
+    parentKey: ref<INiuTreeKey>()
+})
 
 function onExpand(item: INiuTreeData) {
     emit("expand", item)

packages/playground/src/dev/tree.vue

@@ -61,9 +61,9 @@ function onExpand(node: INiuTreeData) {
 }
 const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, list: INiuTreeData<any>[]): Promise<boolean> => {
     return new Promise((resolve) => {
-        // setTimeout(() => {
+        setTimeout(() => {
             resolve(true)
-        // }, 2000);
+        }, 2000);
     })
 }
 </script>

packages/theme-chalk/src/tree.scss

@@ -8,7 +8,6 @@
 }
 .ps-tree-node.component {
     position: relative;
-
     &.draging {
         opacity: 0.6;
     }