vxe-pc-ui 4.10.49 → 4.10.50

package/es/tree/src/tree.js

@@ -1,11 +1,12 @@
 import { ref, h, reactive, computed, watch, onUnmounted, nextTick, onMounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { getI18n, createEvent, getIcon, getConfig, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui';
+import { VxeUI, getI18n, createEvent, getIcon, getConfig, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui';
 import { calcTreeLine, enNodeValue, deNodeValue } from './util';
 import { errLog } from '../../ui/src/log';
 import XEUtils from 'xe-utils';
 import { getSlotVNs } from '../../ui/src/vn';
-import { toCssUnit, isScale, getPaddingTopBottomSize } from '../../ui/src/dom';
+import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode } from '../../ui/src/dom';
+import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
 import VxeLoadingComponent from '../../loading/src/loading';
 /**
  * 生成节点的唯一主键
@@ -34,6 +35,9 @@ function createInternalData() {
             offsetSize: 0,
             rowHeight: 0
         },
+        // prevDragNode: null,
+        // prevDragToChild: false,
+        // prevDragPos: ''
         lastScrollTime: 0
         // hpTimeout: undefined
     };
@@ -127,6 +131,11 @@ export default defineVxeComponent({
         lazy: Boolean,
         toggleMethod: Function,
         loadMethod: Function,
+        drag: {
+            type: Boolean,
+            default: () => getConfig().tree.drag
+        },
+        dragConfig: Object,
         showIcon: {
             type: Boolean,
             default: true
@@ -162,7 +171,10 @@ export default defineVxeComponent({
         'checkbox-change',
         'load-success',
         'load-error',
-        'scroll'
+        'scroll',
+        'node-dragstart',
+        'node-dragover',
+        'node-dragend'
     ],
     setup(props, context) {
         const { emit, slots } = context;
@@ -173,6 +185,8 @@ export default defineVxeComponent({
         const refFooterWrapperElem = ref();
         const refVirtualWrapper = ref();
         const refVirtualBody = ref();
+        const refDragNodeLineElem = ref();
+        const refDragTipElem = ref();
         const reactData = reactive({
             parentHeight: 0,
             customHeight: 0,
@@ -185,7 +199,9 @@ export default defineVxeComponent({
             selectRadioKey: enNodeValue(props.checkNodeKey),
             treeList: [],
             updateExpandedFlag: 1,
-            updateCheckboxFlag: 1
+            updateCheckboxFlag: 1,
+            dragNode: null,
+            dragTipText: ''
         });
         const internalData = createInternalData();
         const refMaps = {
@@ -244,6 +260,9 @@ export default defineVxeComponent({
         const computeLoadingOpts = computed(() => {
             return Object.assign({}, getConfig().tree.loadingConfig, props.loadingConfig);
         });
+        const computeDragOpts = computed(() => {
+            return Object.assign({}, getConfig().tree.dragConfig, props.dragConfig);
+        });
         const computeTreeStyle = computed(() => {
             const { customHeight, customMinHeight, customMaxHeight } = reactData;
             const stys = {};
@@ -262,11 +281,14 @@ export default defineVxeComponent({
             return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
         });
         const computeMaps = {
+            computeKeyField,
+            computeParentField,
             computeChildrenField,
             computeMapChildrenField,
             computeRadioOpts,
             computeCheckboxOpts,
-            computeNodeOpts
+            computeNodeOpts,
+            computeDragOpts
         };
         const $xeTree = {
             xID,
@@ -387,7 +409,7 @@ export default defineVxeComponent({
             const el = refElem.value;
             return el ? el.parentElement : null;
         };
-        const calcTableHeight = (key) => {
+        const calcTreeHeight = (key) => {
             const { parentHeight } = reactData;
             const val = props[key];
             let num = 0;
@@ -408,9 +430,9 @@ export default defineVxeComponent({
             return num;
         };
         const updateHeight = () => {
-            reactData.customHeight = calcTableHeight('height');
-            reactData.customMinHeight = calcTableHeight('minHeight');
-            reactData.customMaxHeight = calcTableHeight('maxHeight');
+            reactData.customHeight = calcTreeHeight('height');
+            reactData.customMinHeight = calcTreeHeight('minHeight');
+            reactData.customMaxHeight = calcTreeHeight('maxHeight');
             // 如果启用虚拟滚动，默认高度
             if (reactData.scrollYLoad && !(reactData.customHeight || reactData.customMinHeight)) {
                 reactData.customHeight = 300;
@@ -442,10 +464,12 @@ export default defineVxeComponent({
                 keyMaps[nodeid] = {
                     item,
                     index,
+                    $index: -1,
+                    _index: -1,
                     items,
                     parent,
                     nodes,
-                    level: nodes.length,
+                    level: nodes.length - 1,
                     treeIndex: index,
                     lineCount: 0,
                     treeLoaded: false
@@ -458,17 +482,21 @@ export default defineVxeComponent({
             const { afterTreeList, nodeMaps } = internalData;
             const childrenField = computeChildrenField.value;
             const mapChildrenField = computeMapChildrenField.value;
+            let vtIndex = 0;
             XEUtils.eachTree(afterTreeList, (item, index, items) => {
                 const nodeid = getNodeId(item);
                 const nodeItem = nodeMaps[nodeid];
                 if (nodeItem) {
                     nodeItem.items = items;
                     nodeItem.treeIndex = index;
+                    nodeItem._index = vtIndex;
                 }
                 else {
                     const rest = {
                         item,
                         index,
+                        $index: -1,
+                        _index: vtIndex,
                         items,
                         parent,
                         nodes: [],
@@ -479,6 +507,7 @@ export default defineVxeComponent({
                     };
                     nodeMaps[nodeid] = rest;
                 }
+                vtIndex++;
             }, { children: transform ? mapChildrenField : childrenField });
         };
         const updateAfterFullData = () => {
@@ -601,7 +630,7 @@ export default defineVxeComponent({
         };
         const handleData = (force) => {
             const { scrollYLoad } = reactData;
-            const { scrollYStore } = internalData;
+            const { scrollYStore, nodeMaps } = internalData;
             let fullList = internalData.afterVisibleList;
             if (force) {
                 // 更新数据，处理筛选和排序
@@ -610,6 +639,13 @@ export default defineVxeComponent({
                 fullList = handleTreeToList();
             }
             const treeList = scrollYLoad ? fullList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullList.slice(0);
+            treeList.forEach((item, $index) => {
+                const nodeid = getNodeId(item);
+                const itemRest = nodeMaps[nodeid];
+                if (itemRest) {
+                    itemRest.$index = $index;
+                }
+            });
             reactData.treeList = treeList;
         };
         const triggerSearchEvent = XEUtils.debounce(() => handleData(true), 350, { trailing: true });
@@ -814,6 +850,26 @@ export default defineVxeComponent({
             internalData.lastScrollLeft = 0;
             return nextTick();
         };
+        const handleNodeMousedownEvent = (evnt, node) => {
+            const { drag } = props;
+            const { nodeMaps } = internalData;
+            const targetEl = evnt.currentTarget;
+            const dragConfig = computeDragOpts.value;
+            const { trigger, isCrossDrag, isPeerDrag, disabledMethod } = dragConfig;
+            const nodeid = getNodeId(node);
+            const triggerTreeNode = getEventTargetNode(evnt, targetEl, 'vxe-tree--node-item-switcher').flag;
+            let isNodeDrag = false;
+            if (drag) {
+                isNodeDrag = trigger === 'node';
+            }
+            if (!triggerTreeNode) {
+                const params = { node, $tree: $xeTree };
+                const itemRest = nodeMaps[nodeid];
+                if (isNodeDrag && (isCrossDrag || isPeerDrag || (itemRest && !itemRest.level)) && !(disabledMethod && disabledMethod(params))) {
+                    handleNodeDragMousedownEvent(evnt, { node });
+                }
+            }
+        };
         const handleNodeClickEvent = (evnt, node) => {
             const { showRadio, showCheckbox, trigger } = props;
             const radioOpts = computeRadioOpts.value;
@@ -1504,6 +1560,8 @@ export default defineVxeComponent({
                         nodeMaps[itemNodeId] = {
                             item: childRow,
                             index: -1,
+                            $index: -1,
+                            _index: -1,
                             items,
                             parent: parent || parentNodeItem.item,
                             nodes: parentNodes.concat(nodes),
@@ -1539,6 +1597,10 @@ export default defineVxeComponent({
                 return list;
             },
             recalculate,
+            getFullData() {
+                const { treeFullData } = internalData;
+                return treeFullData.slice(0);
+            },
             scrollTo: handleScrollTo,
             scrollToNode(node) {
                 return $xeTree.scrollToNodeId(getNodeId(node));
@@ -1573,8 +1635,502 @@ export default defineVxeComponent({
             },
             clearScroll
         };
-        const treePrivateMethods = {};
+        const clearNodeDropOrigin = () => {
+            const el = refElem.value;
+            if (el) {
+                const clss = 'node--drag-origin';
+                XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+                    elem.draggable = false;
+                    removeClass(elem, clss);
+                });
+            }
+        };
+        const updateNodeDropOrigin = (node) => {
+            const el = refElem.value;
+            if (el) {
+                const clss = 'node--drag-origin';
+                const nodeid = getNodeId(node);
+                XEUtils.arrayEach(el.querySelectorAll(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`), (elem) => {
+                    addClass(elem, clss);
+                });
+            }
+        };
+        const updateRowDropTipContent = (itemEl) => {
+            const { dragNode } = reactData;
+            const dragOpts = computeDragOpts.value;
+            const { tooltipMethod } = dragOpts;
+            const rTooltipMethod = tooltipMethod;
+            let tipContent = '';
+            if (rTooltipMethod) {
+                const rtParams = {
+                    $tree: $xeTree,
+                    node: dragNode
+                };
+                tipContent = `${rTooltipMethod(rtParams) || ''}`;
+            }
+            else {
+                tipContent = getI18n('vxe.tree.dragTip', [itemEl.textContent || '']);
+            }
+            reactData.dragTipText = tipContent;
+        };
+        const hideDropTip = () => {
+            const rdTipEl = refDragTipElem.value;
+            const rdLineEl = refDragNodeLineElem.value;
+            if (rdTipEl) {
+                rdTipEl.style.display = '';
+            }
+            if (rdLineEl) {
+                rdLineEl.style.display = '';
+            }
+        };
+        const clearDragStatus = () => {
+            const { dragNode } = reactData;
+            if (dragNode) {
+                clearNodeDropOrigin();
+                hideDropTip();
+                reactData.dragNode = null;
+            }
+        };
+        const handleNodeDragMousedownEvent = (evnt, params) => {
+            evnt.stopPropagation();
+            const { node } = params;
+            const dragConfig = computeDragOpts.value;
+            const { trigger, dragStartMethod } = dragConfig;
+            const dragEl = evnt.currentTarget;
+            const itemEl = trigger === 'node' ? dragEl : dragEl.parentElement.parentElement;
+            clearNodeDropOrigin();
+            if (dragStartMethod && !dragStartMethod(params)) {
+                itemEl.draggable = false;
+                reactData.dragNode = null;
+                hideDropTip();
+                return;
+            }
+            reactData.dragNode = node;
+            itemEl.draggable = true;
+            updateNodeDropOrigin(node);
+            updateRowDropTipContent(itemEl);
+            dispatchEvent('node-dragstart', params, evnt);
+        };
+        const handleNodeDragMouseupEvent = () => {
+            clearDragStatus();
+        };
+        const showDropTip = (evnt, itemEl, showLine, dragPos) => {
+            const wrapperEl = refElem.value;
+            if (!wrapperEl) {
+                return;
+            }
+            const { prevDragToChild } = internalData;
+            const wrapperRect = wrapperEl.getBoundingClientRect();
+            const wrapperHeight = wrapperEl.clientHeight;
+            if (itemEl) {
+                const rdLineEl = refDragNodeLineElem.value;
+                if (rdLineEl) {
+                    if (showLine) {
+                        const trRect = itemEl.getBoundingClientRect();
+                        let itemHeight = itemEl.clientHeight;
+                        const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
+                        if (offsetTop + itemHeight > wrapperHeight) {
+                            itemHeight = wrapperHeight - offsetTop;
+                        }
+                        rdLineEl.style.display = 'block';
+                        rdLineEl.style.top = `${offsetTop}px`;
+                        rdLineEl.style.height = `${itemHeight}px`;
+                        rdLineEl.setAttribute('drag-pos', dragPos);
+                        rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
+                    }
+                    else {
+                        rdLineEl.style.display = '';
+                    }
+                }
+            }
+            const rdTipEl = refDragTipElem.value;
+            if (rdTipEl) {
+                rdTipEl.style.display = 'block';
+                rdTipEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+                rdTipEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - rdTipEl.clientWidth - 1, evnt.clientX - wrapperRect.x)}px`;
+                rdTipEl.setAttribute('drag-status', showLine ? (prevDragToChild ? 'sub' : 'normal') : 'disabled');
+            }
+        };
+        const clearNodeDragData = () => {
+            const wrapperEl = refElem.value;
+            const dtClss = ['.vxe-tree--node-wrapper'];
+            hideDropTip();
+            clearNodeDropOrigin();
+            clearRowAnimate(wrapperEl, dtClss);
+            internalData.prevDragToChild = false;
+            reactData.dragNode = null;
+        };
+        const handleNodeDragSwapEvent = (evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild) => {
+            const { transform } = props;
+            const { nodeMaps, treeFullData, afterVisibleList } = internalData;
+            const dragConfig = computeDragOpts.value;
+            const { animation, isCrossDrag, isPeerDrag, isSelfToChildDrag, dragEndMethod, dragToChildMethod } = dragConfig;
+            const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
+            const keyField = computeKeyField.value;
+            const parentField = computeParentField.value;
+            const childrenField = computeChildrenField.value;
+            const mapChildrenField = computeMapChildrenField.value;
+            const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+            const el = refElem.value;
+            const errRest = {
+                status: false
+            };
+            if (!(el && prevDragNode && dragNode)) {
+                return Promise.resolve(errRest);
+            }
+            // 判断是否有拖动
+            if (prevDragNode !== dragNode) {
+                const dragParams = {
+                    oldNode: dragNode,
+                    newNode: prevDragNode,
+                    dragNode,
+                    dragPos: prevDragPos,
+                    dragToChild: !!prevDragToChild,
+                    offsetIndex: dragOffsetIndex
+                };
+                const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+                return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
+                    if (!status) {
+                        return errRest;
+                    }
+                    const dragNodeid = getNodeId(dragNode);
+                    const dragNodeRest = nodeMaps[dragNodeid] || {};
+                    const _dragNodeIndex = dragNodeRest._index;
+                    let dragNodeHeight = 0;
+                    let dragOffsetTop = -1;
+                    if (animation) {
+                        const prevItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${prevDragNode}"]`);
+                        const oldItemEl = el.querySelector(`.vxe-tree--node-wrapper[nodeid="${dragNodeid}"]`);
+                        const targetItemEl = prevItemEl || oldItemEl;
+                        if (targetItemEl) {
+                            dragNodeHeight = targetItemEl.offsetHeight;
+                        }
+                        if (oldItemEl) {
+                            dragOffsetTop = oldItemEl.offsetTop;
+                        }
+                    }
+                    let oafIndex = -1;
+                    let nafIndex = -1;
+                    if (transform) {
+                        // 移出源位置
+                        const oldRest = dragNodeRest;
+                        const newNodeid = getNodeId(prevDragNode);
+                        const newRest = nodeMaps[newNodeid];
+                        if (oldRest && newRest) {
+                            const { level: oldLevel } = oldRest;
+                            const { level: newLevel } = newRest;
+                            const oldAllMaps = {};
+                            XEUtils.eachTree([dragNode], item => {
+                                oldAllMaps[getNodeId(item)] = item;
+                            }, { children: mapChildrenField });
+                            let isSelfToChildStatus = false;
+                            if (oldLevel && newLevel) {
+                                // 子到子
+                                if (isPeerDrag && !isCrossDrag) {
+                                    if (oldRest.item[parentField] !== newRest.item[parentField]) {
+                                        // 非同级
+                                        return errRest;
+                                    }
+                                }
+                                else {
+                                    if (!isCrossDrag) {
+                                        return errRest;
+                                    }
+                                    if (oldAllMaps[newNodeid]) {
+                                        isSelfToChildStatus = true;
+                                        if (!(isCrossDrag && isSelfToChildDrag)) {
+                                            if (VxeUI.modal) {
+                                                VxeUI.modal.message({
+                                                    status: 'error',
+                                                    content: getI18n('vxe.error.treeDragChild')
+                                                });
+                                            }
+                                            return errRest;
+                                        }
+                                    }
+                                }
+                            }
+                            else if (oldLevel) {
+                                // 子到根
+                                if (!isCrossDrag) {
+                                    return errRest;
+                                }
+                            }
+                            else if (newLevel) {
+                                // 根到子
+                                if (!isCrossDrag) {
+                                    return errRest;
+                                }
+                                if (oldAllMaps[newNodeid]) {
+                                    isSelfToChildStatus = true;
+                                    if (!(isCrossDrag && isSelfToChildDrag)) {
+                                        if (VxeUI.modal) {
+                                            VxeUI.modal.message({
+                                                status: 'error',
+                                                content: getI18n('vxe.error.treeDragChild')
+                                            });
+                                        }
+                                        return errRest;
+                                    }
+                                }
+                            }
+                            else {
+                                // 根到根
+                            }
+                            const fullList = XEUtils.toTreeArray(internalData.afterTreeList, {
+                                key: keyField,
+                                parentKey: parentField,
+                                children: mapChildrenField
+                            });
+                            // 移出
+                            const otfIndex = $xeTree.findNodeIndexOf(fullList, dragNode);
+                            fullList.splice(otfIndex, 1);
+                            // 插入
+                            const ptfIndex = $xeTree.findNodeIndexOf(fullList, prevDragNode);
+                            const ntfIndex = ptfIndex + dragOffsetIndex;
+                            fullList.splice(ntfIndex, 0, dragNode);
+                            // 改变层级
+                            if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
+                                XEUtils.each(dragNode[childrenField], childNode => {
+                                    childNode[parentField] = dragNode[parentField];
+                                });
+                            }
+                            dragNode[parentField] = isDragToChildFlag ? prevDragNode[keyField] : prevDragNode[parentField];
+                            internalData.treeFullData = XEUtils.toArrayTree(fullList, {
+                                key: keyField,
+                                parentKey: parentField,
+                                children: childrenField,
+                                mapChildren: mapChildrenField
+                            });
+                        }
+                    }
+                    else {
+                        // 移出
+                        oafIndex = $xeTree.findNodeIndexOf(afterVisibleList, dragNode);
+                        const otfIndex = $xeTree.findNodeIndexOf(treeFullData, dragNode);
+                        afterVisibleList.splice(oafIndex, 1);
+                        treeFullData.splice(otfIndex, 1);
+                        // 插入
+                        const pafIndex = $xeTree.findNodeIndexOf(afterVisibleList, prevDragNode);
+                        const ptfIndex = $xeTree.findNodeIndexOf(treeFullData, prevDragNode);
+                        nafIndex = pafIndex + dragOffsetIndex;
+                        const ntfIndex = ptfIndex + dragOffsetIndex;
+                        afterVisibleList.splice(nafIndex, 0, dragNode);
+                        treeFullData.splice(ntfIndex, 0, dragNode);
+                    }
+                    cacheNodeMap();
+                    handleData(transform);
+                    if (!(transform)) {
+                        updateAfterDataIndex();
+                    }
+                    updateCheckboxStatus();
+                    if (reactData.scrollYLoad) {
+                        updateYSpace();
+                    }
+                    if (evnt) {
+                        dispatchEvent('node-dragend', {
+                            oldNode: dragNode,
+                            newNode: prevDragNode,
+                            dragNode,
+                            dragPos: prevDragPos,
+                            dragToChild: isDragToChildFlag,
+                            offsetIndex: dragOffsetIndex,
+                            _index: {
+                                newIndex: nafIndex,
+                                oldIndex: oafIndex
+                            }
+                        }, evnt);
+                    }
+                    return nextTick().then(() => {
+                        if (animation) {
+                            const { treeList } = reactData;
+                            const { nodeMaps } = internalData;
+                            const dragNodeRest = nodeMaps[dragNodeid];
+                            const _newNodeIndex = dragNodeRest._index;
+                            const firstNode = treeList[0];
+                            const firstNodeRest = nodeMaps[getNodeId(firstNode)];
+                            const wrapperEl = el;
+                            if (firstNodeRest) {
+                                const _firstNodeIndex = firstNodeRest._index;
+                                const _lastNodeIndex = _firstNodeIndex + treeList.length;
+                                let rsIndex = -1;
+                                let reIndex = -1;
+                                let offsetRate = 1;
+                                if (_dragNodeIndex < _firstNodeIndex) {
+                                    // 从上往下虚拟拖拽
+                                    rsIndex = 0;
+                                    reIndex = _newNodeIndex - _firstNodeIndex;
+                                }
+                                else if (_dragNodeIndex > _lastNodeIndex) {
+                                    // 从下往上虚拟拖拽
+                                    const $newNodeIndex = dragNodeRest.$index;
+                                    rsIndex = $newNodeIndex + 1;
+                                    reIndex = treeList.length;
+                                    offsetRate = -1;
+                                }
+                                else {
+                                    if (_newNodeIndex > _dragNodeIndex) {
+                                        // 从上往下拖拽
+                                        rsIndex = _dragNodeIndex - _firstNodeIndex;
+                                        reIndex = rsIndex + _newNodeIndex - _dragNodeIndex;
+                                    }
+                                    else {
+                                        // 从下往上拖拽
+                                        rsIndex = _newNodeIndex - _firstNodeIndex;
+                                        reIndex = rsIndex + _dragNodeIndex - _newNodeIndex + 1;
+                                        offsetRate = -1;
+                                    }
+                                }
+                                const dragRangeList = treeList.slice(rsIndex, reIndex);
+                                if (dragRangeList.length) {
+                                    const dtClss = [];
+                                    dragRangeList.forEach(item => {
+                                        const nodeid = getNodeId(item);
+                                        dtClss.push(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`);
+                                    });
+                                    const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                                    moveRowAnimateToTb(dtTrList, offsetRate * dragNodeHeight);
+                                }
+                            }
+                            const drClss = [`.vxe-tree--node-wrapper[nodeid="${dragNodeid}"]`];
+                            const newDtTrList = wrapperEl.querySelectorAll(drClss.join(','));
+                            const newTrEl = newDtTrList[0];
+                            if (dragOffsetTop > -1 && newTrEl) {
+                                moveRowAnimateToTb(newDtTrList, dragOffsetTop - newTrEl.offsetTop);
+                            }
+                        }
+                        recalculate();
+                    }).then(() => {
+                        return {
+                            status: true
+                        };
+                    });
+                }).catch(() => {
+                    return errRest;
+                }).then((rest) => {
+                    clearNodeDragData();
+                    return rest;
+                });
+            }
+            clearNodeDragData();
+            return Promise.resolve(errRest);
+        };
+        const handleNodeDragDragstartEvent = (evnt) => {
+            if (evnt.dataTransfer) {
+                evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
+            }
+        };
+        const handleNodeDragDragendEvent = (evnt) => {
+            const { lazy } = props;
+            const { dragNode } = reactData;
+            const { nodeMaps, prevDragNode, prevDragPos, prevDragToChild } = internalData;
+            const hasChildField = computeHasChildField.value;
+            if (lazy && prevDragToChild) {
+                // 懒加载
+                const newNodeid = getNodeId(prevDragNode);
+                const nodeRest = nodeMaps[newNodeid];
+                if (prevDragNode[hasChildField]) {
+                    if (nodeRest && nodeRest.treeLoaded) {
+                        handleNodeDragSwapEvent(evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild);
+                    }
+                }
+                else {
+                    handleNodeDragSwapEvent(evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild);
+                }
+            }
+            else {
+                handleNodeDragSwapEvent(evnt, dragNode, prevDragNode, prevDragPos, prevDragToChild);
+            }
+        };
+        const handleNodeDragDragoverEvent = (evnt) => {
+            const { lazy, transform } = props;
+            const { dragNode } = reactData;
+            const { nodeMaps } = internalData;
+            const dragConfig = computeDragOpts.value;
+            const parentField = computeParentField.value;
+            const hasChildField = computeHasChildField.value;
+            const { isCrossDrag, isPeerDrag, isToChildDrag } = dragConfig;
+            if (!dragNode && !isCrossDrag) {
+                evnt.preventDefault();
+            }
+            const isControlKey = hasControlKey(evnt);
+            const itemEl = evnt.currentTarget;
+            const nodeid = itemEl.getAttribute('nodeid') || '';
+            const nodeItem = nodeMaps[nodeid];
+            if (nodeItem) {
+                evnt.preventDefault();
+                const node = nodeItem.item;
+                const offsetY = evnt.clientY - itemEl.getBoundingClientRect().y;
+                const dragPos = offsetY < itemEl.clientHeight / 2 ? 'top' : 'bottom';
+                internalData.prevDragToChild = !!(transform && (isCrossDrag && isToChildDrag) && isControlKey);
+                internalData.prevDragNode = node;
+                internalData.prevDragPos = dragPos;
+                if ((dragNode && getNodeId(dragNode) === nodeid) ||
+                    (isControlKey && lazy && node[hasChildField] && nodeItem && !nodeItem.treeLoaded) ||
+                    (!isCrossDrag && transform && (isPeerDrag ? dragNode[parentField] !== node[parentField] : nodeItem.level))) {
+                    showDropTip(evnt, itemEl, false, dragPos);
+                    return;
+                }
+                showDropTip(evnt, itemEl, true, dragPos);
+                dispatchEvent('node-dragover', {
+                    oldRNode: dragNode,
+                    targetNode: node,
+                    dragPos
+                }, evnt);
+            }
+        };
+        const treePrivateMethods = {
+            handleData,
+            cacheNodeMap,
+            updateAfterDataIndex,
+            updateCheckboxStatus,
+            updateYSpace,
+            findNodeIndexOf(list, node) {
+                return node ? XEUtils.findIndexOf(list, item => $xeTree.eqNode(item, node)) : -1;
+            },
+            eqNode(node1, node2) {
+                if (node1 && node2) {
+                    if (node1 === node2) {
+                        return true;
+                    }
+                    return getNodeId(node1) === getNodeId(node2);
+                }
+                return false;
+            }
+        };
         Object.assign($xeTree, treeMethods, treePrivateMethods);
+        const renderDragIcon = (node, nodeid) => {
+            const { drag, transform } = props;
+            const { nodeMaps } = internalData;
+            const dragOpts = computeDragOpts.value;
+            const { showIcon, isPeerDrag, isCrossDrag, visibleMethod } = dragOpts;
+            const params = { node, $tree: $xeTree };
+            if (drag && showIcon && transform && (!visibleMethod || visibleMethod(params))) {
+                const nodeItem = nodeMaps[nodeid];
+                if (nodeItem && (isPeerDrag || isCrossDrag || !nodeItem.level)) {
+                    const dragConfig = computeDragOpts.value;
+                    const { icon, trigger, disabledMethod } = dragConfig;
+                    const isDisabled = disabledMethod && disabledMethod(params);
+                    const ons = {};
+                    if (trigger !== 'node') {
+                        ons.onMousedown = (evnt) => {
+                            if (!isDisabled) {
+                                handleNodeDragMousedownEvent(evnt, params);
+                            }
+                        };
+                        ons.onMouseup = handleNodeDragMouseupEvent;
+                    }
+                    return h('div', Object.assign({ class: ['vxe-tree--drag-handle', {
+                                'is--disabled': isDisabled
+                            }] }, ons), [
+                        h('i', {
+                            class: icon || getIcon().TREE_DRAG
+                        })
+                    ]);
+                }
+            }
+            return renderEmptyElement($xeTree);
+        };
         const renderRadio = (node, nodeid, isChecked) => {
             const { showRadio } = props;
             const radioOpts = computeRadioOpts.value;
@@ -1634,7 +2190,7 @@ export default defineVxeComponent({
             return renderEmptyElement($xeTree);
         };
         const renderNode = (node, nodeid) => {
-            const { lazy, showRadio, showCheckbox, showLine, indent, iconOpen, iconClose, iconLoaded, showIcon } = props;
+            const { lazy, drag, transform, showRadio, showCheckbox, showLine, indent, iconOpen, iconClose, iconLoaded, showIcon } = props;
             const { currentNode, selectRadioKey, updateExpandedFlag } = reactData;
             const { afterTreeList, nodeMaps, treeExpandedMaps, treeExpandLazyLoadedMaps } = internalData;
             const childrenField = computeChildrenField.value;
@@ -1667,11 +2223,25 @@ export default defineVxeComponent({
             }
             const prevNode = nodeItem.items[nodeItem.treeIndex - 1];
             const nParams = { node, isExpand };
-            return h('div', {
-                key: nodeid,
-                class: ['vxe-tree--node-wrapper', `node--level-${nLevel}`],
-                nodeid
-            }, [
+            const itemOn = {
+                onMousedown(evnt) {
+                    handleNodeMousedownEvent(evnt, node);
+                },
+                onMouseup: handleNodeDragMouseupEvent,
+                onClick(evnt) {
+                    handleNodeClickEvent(evnt, node);
+                },
+                onDblclick(evnt) {
+                    handleNodeDblclickEvent(evnt, node);
+                }
+            };
+            // 拖拽行事件
+            if (drag && transform) {
+                itemOn.onDragstart = handleNodeDragDragstartEvent;
+                itemOn.onDragend = handleNodeDragDragendEvent;
+                itemOn.onDragover = handleNodeDragDragoverEvent;
+            }
+            return h('div', Object.assign({ key: nodeid, class: ['vxe-tree--node-wrapper', `node--level-${nLevel}`], nodeid }, itemOn), [
                 h('div', {
                     class: ['vxe-tree--node-item', {
                             'is--current': currentNode && nodeid === getNodeId(currentNode),
@@ -1679,13 +2249,7 @@ export default defineVxeComponent({
                             'is-checkbox--checked': isCheckboxChecked
                         }],
                     style: {
-                        paddingLeft: `${(nLevel - 1) * (indent || 1)}px`
-                    },
-                    onClick(evnt) {
-                        handleNodeClickEvent(evnt, node);
-                    },
-                    onDblclick(evnt) {
-                        handleNodeDblclickEvent(evnt, node);
+                        paddingLeft: `${nLevel * (indent || 1)}px`
                     }
                 }, [
                     showLine
@@ -1718,6 +2282,7 @@ export default defineVxeComponent({
                                 ])
                         ]
                         : []),
+                    renderDragIcon(node, nodeid),
                     renderRadio(node, nodeid, isRadioChecked),
                     renderCheckbox(node, nodeid, isCheckboxChecked),
                     h('div', {
@@ -1763,6 +2328,52 @@ export default defineVxeComponent({
                 });
             return nodeVNs;
         };
+        const renderDragTip = () => {
+            const { drag } = props;
+            const { dragNode, dragTipText } = reactData;
+            const dragOpts = computeDragOpts.value;
+            const dNode = dragNode;
+            if (drag) {
+                return h('div', {
+                    class: 'vxe-tree--drag-wrapper'
+                }, [
+                    h('div', {
+                        ref: refDragNodeLineElem,
+                        class: ['vxe-tree--drag-node-line', {
+                                'is--guides': dragOpts.showGuidesStatus
+                            }]
+                    }),
+                    dNode && dragOpts.showDragTip
+                        ? h('div', {
+                            ref: refDragTipElem,
+                            class: 'vxe-tree--drag-sort-tip'
+                        }, [
+                            h('div', {
+                                class: 'vxe-tree--drag-sort-tip-wrapper'
+                            }, [
+                                h('div', {
+                                    class: 'vxe-tree--drag-sort-tip-status'
+                                }, [
+                                    h('span', {
+                                        class: ['vxe-tree--drag-sort-tip-normal-status', getIcon().TREE_DRAG_STATUS_NODE]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-tree--drag-sort-tip-sub-status', getIcon().TREE_DRAG_STATUS_SUB_NODE]
+                                    }),
+                                    h('span', {
+                                        class: ['vxe-tree--drag-sort-tip-disabled-status', getIcon().TREE_DRAG_DISABLED]
+                                    })
+                                ]),
+                                h('div', {
+                                    class: 'vxe-tree--drag-sort-tip-content'
+                                }, dragTipText)
+                            ])
+                        ])
+                        : renderEmptyElement($xeTree)
+                ]);
+            }
+            return renderEmptyElement($xeTree);
+        };
         const renderVN = () => {
             const { loading, trigger, showLine } = props;
             const { bodyHeight, topSpaceHeight, treeList } = reactData;
@@ -1819,6 +2430,10 @@ export default defineVxeComponent({
                         class: 'vxe-tree--footer-wrapper'
                     }, footerSlot({ $tree: $xeTree }))
                     : renderEmptyElement($xeTree),
+                /**
+                 * 拖拽提示
+                 */
+                renderDragTip(),
                 /**
                  * 加载中
                  */