vxe-pc-ui 4.10.49 → 4.11.0

package/lib/tree/src/tree.js

@@ -12,6 +12,7 @@ var _log = require("../../ui/src/log");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _vn = require("../../ui/src/vn");
 var _dom = require("../../ui/src/dom");
+var _anime = require("../../ui/src/anime");
 var _loading = _interopRequireDefault(require("../../loading/src/loading"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
@@ -41,6 +42,9 @@ function createInternalData() {
       offsetSize: 0,
       rowHeight: 0
     },
+    // prevDragNode: null,
+    // prevDragToChild: false,
+    // prevDragPos: ''
     lastScrollTime: 0
     // hpTimeout: undefined
   };
@@ -134,6 +138,11 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     lazy: Boolean,
     toggleMethod: Function,
     loadMethod: Function,
+    drag: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().tree.drag
+    },
+    dragConfig: Object,
     showIcon: {
       type: Boolean,
       default: true
@@ -158,7 +167,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     },
     virtualYConfig: Object
   },
-  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll'],
+  emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend'],
   setup(props, context) {
     const {
       emit,
@@ -173,6 +182,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refFooterWrapperElem = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
+    const refDragNodeLineElem = (0, _vue.ref)();
+    const refDragTipElem = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)({
       parentHeight: 0,
       customHeight: 0,
@@ -185,7 +196,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       selectRadioKey: (0, _util.enNodeValue)(props.checkNodeKey),
       treeList: [],
       updateExpandedFlag: 1,
-      updateCheckboxFlag: 1
+      updateCheckboxFlag: 1,
+      dragNode: null,
+      dragTipText: ''
     });
     const internalData = createInternalData();
     const refMaps = {
@@ -252,6 +265,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeLoadingOpts = (0, _vue.computed)(() => {
       return Object.assign({}, (0, _ui.getConfig)().tree.loadingConfig, props.loadingConfig);
     });
+    const computeDragOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, (0, _ui.getConfig)().tree.dragConfig, props.dragConfig);
+    });
     const computeTreeStyle = (0, _vue.computed)(() => {
       const {
         customHeight,
@@ -274,11 +290,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       return Object.assign({}, (0, _ui.getConfig)().tree.filterConfig, props.filterConfig);
     });
     const computeMaps = {
+      computeKeyField,
+      computeParentField,
       computeChildrenField,
       computeMapChildrenField,
       computeRadioOpts,
       computeCheckboxOpts,
-      computeNodeOpts
+      computeNodeOpts,
+      computeDragOpts
     };
     const $xeTree = {
       xID,
@@ -422,7 +441,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const el = refElem.value;
       return el ? el.parentElement : null;
     };
-    const calcTableHeight = key => {
+    const calcTreeHeight = key => {
       const {
         parentHeight
       } = reactData;
@@ -443,9 +462,9 @@ var _default = exports.default = (0, _comp.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;
@@ -479,10 +498,12 @@ var _default = exports.default = (0, _comp.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
@@ -502,16 +523,20 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = internalData;
       const childrenField = computeChildrenField.value;
       const mapChildrenField = computeMapChildrenField.value;
+      let vtIndex = 0;
       _xeUtils.default.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: [],
@@ -522,6 +547,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           };
           nodeMaps[nodeid] = rest;
         }
+        vtIndex++;
       }, {
         children: transform ? mapChildrenField : childrenField
       });
@@ -667,7 +693,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         scrollYLoad
       } = reactData;
       const {
-        scrollYStore
+        scrollYStore,
+        nodeMaps
       } = internalData;
       let fullList = internalData.afterVisibleList;
       if (force) {
@@ -677,6 +704,13 @@ var _default = exports.default = (0, _comp.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.default.debounce(() => handleData(true), 350, {
@@ -923,6 +957,40 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       internalData.lastScrollLeft = 0;
       return (0, _vue.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 = (0, _dom.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,
@@ -1757,6 +1825,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             nodeMaps[itemNodeId] = {
               item: childRow,
               index: -1,
+              $index: -1,
+              _index: -1,
               items,
               parent: parent || parentNodeItem.item,
               nodes: parentNodes.concat(nodes),
@@ -1797,6 +1867,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         return list;
       },
       recalculate,
+      getFullData() {
+        const {
+          treeFullData
+        } = internalData;
+        return treeFullData.slice(0);
+      },
       scrollTo: handleScrollTo,
       scrollToNode(node) {
         return $xeTree.scrollToNodeId(getNodeId(node));
@@ -1837,8 +1913,561 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       },
       clearScroll
     };
-    const treePrivateMethods = {};
+    const clearNodeDropOrigin = () => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'node--drag-origin';
+        _xeUtils.default.arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          elem.draggable = false;
+          (0, _dom.removeClass)(elem, clss);
+        });
+      }
+    };
+    const updateNodeDropOrigin = node => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'node--drag-origin';
+        const nodeid = getNodeId(node);
+        _xeUtils.default.arrayEach(el.querySelectorAll(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`), elem => {
+          (0, _dom.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 = (0, _ui.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();
+      (0, _anime.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.default.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 (_ui.VxeUI.modal) {
+                        _ui.VxeUI.modal.message({
+                          status: 'error',
+                          content: (0, _ui.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 (_ui.VxeUI.modal) {
+                      _ui.VxeUI.modal.message({
+                        status: 'error',
+                        content: (0, _ui.getI18n)('vxe.error.treeDragChild')
+                      });
+                    }
+                    return errRest;
+                  }
+                }
+              } else {
+                // 根到根
+              }
+              const fullList = _xeUtils.default.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.default.each(dragNode[childrenField], childNode => {
+                  childNode[parentField] = dragNode[parentField];
+                });
+              }
+              dragNode[parentField] = isDragToChildFlag ? prevDragNode[keyField] : prevDragNode[parentField];
+              internalData.treeFullData = _xeUtils.default.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 (0, _vue.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(','));
+                  (0, _anime.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) {
+                (0, _anime.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((0, _dom.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 = (0, _dom.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.default.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 (0, _vue.h)('div', Object.assign({
+            class: ['vxe-tree--drag-handle', {
+              'is--disabled': isDisabled
+            }]
+          }, ons), [(0, _vue.h)('i', {
+            class: icon || (0, _ui.getIcon)().TREE_DRAG
+          })]);
+        }
+      }
+      return (0, _ui.renderEmptyElement)($xeTree);
+    };
     const renderRadio = (node, nodeid, isChecked) => {
       const {
         showRadio
@@ -1920,6 +2549,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const renderNode = (node, nodeid) => {
       const {
         lazy,
+        drag,
+        transform,
         showRadio,
         showCheckbox,
         showLine,
@@ -1973,24 +2604,36 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         node,
         isExpand
       };
-      return (0, _vue.h)('div', {
+      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 (0, _vue.h)('div', Object.assign({
         key: nodeid,
         class: ['vxe-tree--node-wrapper', `node--level-${nLevel}`],
         nodeid
-      }, [(0, _vue.h)('div', {
+      }, itemOn), [(0, _vue.h)('div', {
         class: ['vxe-tree--node-item', {
           'is--current': currentNode && nodeid === getNodeId(currentNode),
           'is-radio--checked': isRadioChecked,
           '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 ? (0, _vue.h)('div', {
         class: 'vxe-tree--node-line-wrapper'
@@ -2008,7 +2651,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       }, iconSlot ? (0, _vn.getSlotVNs)(iconSlot(nParams)) : [(0, _vue.h)('i', {
         class: isLazyLoading ? iconLoaded || (0, _ui.getIcon)().TREE_NODE_LOADED : isExpand ? iconOpen || (0, _ui.getIcon)().TREE_NODE_OPEN : iconClose || (0, _ui.getIcon)().TREE_NODE_CLOSE
-      })])] : []), renderRadio(node, nodeid, isRadioChecked), renderCheckbox(node, nodeid, isCheckboxChecked), (0, _vue.h)('div', {
+      })])] : []), renderDragIcon(node, nodeid), renderRadio(node, nodeid, isRadioChecked), renderCheckbox(node, nodeid, isCheckboxChecked), (0, _vue.h)('div', {
         class: 'vxe-tree--node-item-inner'
       }, [(0, _vue.h)('div', {
         class: 'vxe-tree--node-item-title'
@@ -2044,6 +2687,43 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       });
       return nodeVNs;
     };
+    const renderDragTip = () => {
+      const {
+        drag
+      } = props;
+      const {
+        dragNode,
+        dragTipText
+      } = reactData;
+      const dragOpts = computeDragOpts.value;
+      const dNode = dragNode;
+      if (drag) {
+        return (0, _vue.h)('div', {
+          class: 'vxe-tree--drag-wrapper'
+        }, [(0, _vue.h)('div', {
+          ref: refDragNodeLineElem,
+          class: ['vxe-tree--drag-node-line', {
+            'is--guides': dragOpts.showGuidesStatus
+          }]
+        }), dNode && dragOpts.showDragTip ? (0, _vue.h)('div', {
+          ref: refDragTipElem,
+          class: 'vxe-tree--drag-sort-tip'
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-tree--drag-sort-tip-wrapper'
+        }, [(0, _vue.h)('div', {
+          class: 'vxe-tree--drag-sort-tip-status'
+        }, [(0, _vue.h)('span', {
+          class: ['vxe-tree--drag-sort-tip-normal-status', (0, _ui.getIcon)().TREE_DRAG_STATUS_NODE]
+        }), (0, _vue.h)('span', {
+          class: ['vxe-tree--drag-sort-tip-sub-status', (0, _ui.getIcon)().TREE_DRAG_STATUS_SUB_NODE]
+        }), (0, _vue.h)('span', {
+          class: ['vxe-tree--drag-sort-tip-disabled-status', (0, _ui.getIcon)().TREE_DRAG_DISABLED]
+        })]), (0, _vue.h)('div', {
+          class: 'vxe-tree--drag-sort-tip-content'
+        }, dragTipText)])]) : (0, _ui.renderEmptyElement)($xeTree)]);
+      }
+      return (0, _ui.renderEmptyElement)($xeTree);
+    };
     const renderVN = () => {
       const {
         loading,
@@ -2102,6 +2782,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }, footerSlot({
         $tree: $xeTree
       })) : (0, _ui.renderEmptyElement)($xeTree),
+      /**
+       * 拖拽提示
+       */
+      renderDragTip(),
       /**
        * 加载中
        */