vxe-pc-ui 4.10.49 → 4.11.0

package/lib/index.umd.js

@@ -3599,14 +3599,14 @@ function checkDynamic() {
 }
 ;// CONCATENATED MODULE: ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.10.49"}`;
+const log_version = `ui v${"4.11.0"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
 
-const ui_version = "4.10.49";
+const ui_version = "4.11.0";
 index_esm_VxeUI.uiVersion = ui_version;
 index_esm_VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -3974,6 +3974,12 @@ setConfig({
     radioConfig: {
       strict: true
     },
+    dragConfig: {
+      showIcon: true,
+      animation: true,
+      showGuidesStatus: true,
+      showDragTip: true
+    },
     virtualYConfig: {
       enabled: true,
       gt: 50,
@@ -4157,6 +4163,10 @@ setIcon({
   TREE_NODE_OPEN: iconPrefix + 'caret-right rotate90',
   TREE_NODE_CLOSE: iconPrefix + 'caret-right',
   TREE_NODE_LOADED: iconPrefix + 'spinner roll',
+  TREE_DRAG: iconPrefix + 'drag-handle',
+  TREE_DRAG_STATUS_NODE: iconPrefix + 'sort',
+  TREE_DRAG_STATUS_SUB_NODE: iconPrefix + 'add-sub',
+  TREE_DRAG_DISABLED: iconPrefix + 'no-drop',
   // tree-select
   TREE_SELECT_LOADED: iconPrefix + 'spinner roll',
   TREE_SELECT_OPEN: iconPrefix + 'caret-down rotate180',
@@ -4328,7 +4338,8 @@ setIcon({
       searchEmpty: '未匹配到数据！'
     },
     tree: {
-      searchEmpty: '未匹配到数据！'
+      searchEmpty: '未匹配到数据！',
+      dragTip: '移动：{0}'
     },
     treeSelect: {
       clearChecked: '清除',
@@ -5221,14 +5232,14 @@ function isScale(val) {
 function hasClass(elem, cls) {
   return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
 }
-function removeClass(elem, cls) {
+function dom_removeClass(elem, cls) {
   if (elem && hasClass(elem, cls)) {
     elem.className = elem.className.replace(getClsRE(cls), '');
   }
 }
-function addClass(elem, cls) {
+function dom_addClass(elem, cls) {
   if (elem && !hasClass(elem, cls)) {
-    removeClass(elem, cls);
+    dom_removeClass(elem, cls);
     elem.className = `${elem.className} ${cls}`;
   }
 }
@@ -25252,7 +25263,7 @@ const IconPicker = VxeIconPicker;
     const imagePreviewPrivateMethods = {};
     const resetStyle = () => {
       const elem = refElem.value;
-      removeClass(elem, 'is--move');
+      dom_removeClass(elem, 'is--move');
       Object.assign(reactData, {
         offsetPct11: false,
         offsetScale: 0,
@@ -25494,7 +25505,7 @@ const IconPicker = VxeIconPicker;
           visibleWidth
         } = getDomNode();
         et.preventDefault();
-        addClass(elem, 'is--move');
+        dom_addClass(elem, 'is--move');
         // 限制边界值
         if (pageX > marginSize && pageY > marginSize && pageX < visibleWidth - marginSize && pageY < visibleHeight - marginSize) {
           reactData.offsetLeft = offsetLeft + pageX - startX;
@@ -25504,7 +25515,7 @@ const IconPicker = VxeIconPicker;
       document.onmouseup = () => {
         document.onmousemove = domMousemove;
         document.onmouseup = domMouseup;
-        removeClass(elem, 'is--move');
+        dom_removeClass(elem, 'is--move');
       };
     };
     const handleGlobalKeydownEvent = evnt => {
@@ -25685,7 +25696,7 @@ const IconPicker = VxeIconPicker;
       const elem = refElem.value;
       if (elem) {
         elem.removeEventListener('wheel', wheelEvent);
-        removeClass(elem, 'is--move');
+        dom_removeClass(elem, 'is--move');
       }
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
@@ -29850,6 +29861,7 @@ function select_createInternalData() {
       type: Boolean,
       default: null
     },
+    popupConfig: Object,
     virtualYConfig: Object,
     scrollY: Object,
     /**
@@ -30004,6 +30016,9 @@ function select_createInternalData() {
       const selectVals = computeSelectVals.value;
       return checkMaxLimit(selectVals);
     });
+    const computePopupOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().treeSelect.popupConfig, props.popupConfig);
+    });
     const computeVirtualYOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().select.virtualYConfig || getConfig().select.scrollY, props.virtualYConfig || props.scrollY);
     });
@@ -30016,6 +30031,22 @@ function select_createInternalData() {
     const computeMultiMaxCharNum = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(props.multiCharOverflow);
     });
+    const computePopupWrapperStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const popupOpts = computePopupOpts.value;
+      const {
+        height,
+        width
+      } = popupOpts;
+      const stys = {};
+      if (width) {
+        stys.width = toCssUnit(width);
+      }
+      if (height) {
+        stys.height = toCssUnit(height);
+        stys.maxHeight = toCssUnit(height);
+      }
+      return stys;
+    });
     const computeSelectVals = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         modelValue,
@@ -31213,7 +31244,6 @@ function select_createInternalData() {
     const renderVN = () => {
       const {
         className,
-        popupClassName,
         multiple,
         loading,
         filterable,
@@ -31237,6 +31267,9 @@ function select_createInternalData() {
       const btnTransfer = computeBtnTransfer.value;
       const formReadonly = computeFormReadonly.value;
       const inpPlaceholder = computeInpPlaceholder.value;
+      const popupWrapperStyle = computePopupWrapperStyle.value;
+      const popupOpts = computePopupOpts.value;
+      const popupClassName = popupOpts.className || props.popupClassName;
       const defaultSlot = slots.default;
       const headerSlot = slots.header;
       const footerSlot = slots.footer;
@@ -31304,7 +31337,8 @@ function select_createInternalData() {
         placement: reactData.panelPlacement,
         style: reactData.panelStyle
       }, initialized && (visiblePanel || isAniVisible) ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-select--panel-wrapper'
+        class: 'vxe-select--panel-wrapper',
+        style: popupWrapperStyle
       }, [filterable ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-select--panel-search'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(input, {
@@ -35194,7 +35228,7 @@ const Select = VxeSelect;
           rsSplitterLineEl.style.display = '';
         }
         handleUpdate();
-        removeClass(el, 'is--drag');
+        dom_removeClass(el, 'is--drag');
         dispatchEvent('resize-end', {
           prevItem,
           nextItem,
@@ -35208,7 +35242,7 @@ const Select = VxeSelect;
         handleReStyle(evnt);
       }
       handleDrag(evnt);
-      addClass(el, 'is--drag');
+      dom_addClass(el, 'is--drag');
       dispatchEvent('resize-start', {
         prevItem,
         nextItem
@@ -37509,16 +37543,16 @@ const scrollbarOffsetSize = 20;
         } = headerWrapperEl;
         if (headPrevEl) {
           if ((lrPosition ? scrollTop : scrollLeft) > 0) {
-            addClass(headPrevEl, 'scrolling--middle');
+            dom_addClass(headPrevEl, 'scrolling--middle');
           } else {
-            removeClass(headPrevEl, 'scrolling--middle');
+            dom_removeClass(headPrevEl, 'scrolling--middle');
           }
         }
         if (headNextEl) {
           if (lrPosition ? clientHeight < scrollHeight - Math.ceil(scrollTop) : clientWidth < scrollWidth - Math.ceil(scrollLeft)) {
-            addClass(headNextEl, 'scrolling--middle');
+            dom_addClass(headNextEl, 'scrolling--middle');
           } else {
-            removeClass(headNextEl, 'scrolling--middle');
+            dom_removeClass(headNextEl, 'scrolling--middle');
           }
         }
       }
@@ -39364,6 +39398,53 @@ function calcTreeLine($xeTree, node, prevNode) {
   }
   return (rowHeight || 28) * expandSize - (prevNode ? 1 : 12);
 }
+;// CONCATENATED MODULE: ./packages/ui/src/anime.ts
+
+
+const rowMoveCls = 'row--drag-move';
+const colMoveClass = 'col--drag-move';
+/**
+ * 上下拖拽
+ */
+function moveRowAnimateToTb(elemList, offsetTop) {
+  external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateY(${offsetTop}px)`;
+  });
+  requestAnimationFrame(() => {
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elemList, trEl => {
+      dom_addClass(trEl, rowMoveCls);
+      trEl.style.transform = '';
+    });
+  });
+}
+function clearRowAnimate(elem, clss) {
+  setTimeout(() => {
+    if (elem) {
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => dom_removeClass(elem, rowMoveCls));
+    }
+  }, 500);
+}
+/**
+ * 左右拖拽
+ */
+function moveColAnimateToLr(elemList, offsetLeft) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateX(${offsetLeft}px)`;
+  });
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, colMoveClass);
+      trEl.style.transform = '';
+    });
+  });
+}
+function clearColAnimate(elem, clss) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, colMoveClass));
+    }
+  }, 500);
+}
 ;// CONCATENATED MODULE: ./packages/tree/src/tree.ts
 
 
@@ -39375,6 +39456,7 @@ function calcTreeLine($xeTree, node, prevNode) {
 
 
 
+
 /**
  * 生成节点的唯一主键
  */
@@ -39402,6 +39484,9 @@ function tree_createInternalData() {
       offsetSize: 0,
       rowHeight: 0
     },
+    // prevDragNode: null,
+    // prevDragToChild: false,
+    // prevDragPos: ''
     lastScrollTime: 0
     // hpTimeout: undefined
   };
@@ -39495,6 +39580,11 @@ function tree_createInternalData() {
     lazy: Boolean,
     toggleMethod: Function,
     loadMethod: Function,
+    drag: {
+      type: Boolean,
+      default: () => getConfig().tree.drag
+    },
+    dragConfig: Object,
     showIcon: {
       type: Boolean,
       default: true
@@ -39519,7 +39609,7 @@ function tree_createInternalData() {
     },
     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,
@@ -39534,6 +39624,8 @@ function tree_createInternalData() {
     const refFooterWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualBody = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refDragNodeLineElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({
       parentHeight: 0,
       customHeight: 0,
@@ -39546,7 +39638,9 @@ function tree_createInternalData() {
       selectRadioKey: enNodeValue(props.checkNodeKey),
       treeList: [],
       updateExpandedFlag: 1,
-      updateCheckboxFlag: 1
+      updateCheckboxFlag: 1,
+      dragNode: null,
+      dragTipText: ''
     });
     const internalData = tree_createInternalData();
     const refMaps = {
@@ -39613,6 +39707,9 @@ function tree_createInternalData() {
     const computeLoadingOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().tree.loadingConfig, props.loadingConfig);
     });
+    const computeDragOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, getConfig().tree.dragConfig, props.dragConfig);
+    });
     const computeTreeStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         customHeight,
@@ -39635,11 +39732,14 @@ function tree_createInternalData() {
       return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
     });
     const computeMaps = {
+      computeKeyField,
+      computeParentField,
       computeChildrenField,
       computeMapChildrenField,
       computeRadioOpts,
       computeCheckboxOpts,
-      computeNodeOpts
+      computeNodeOpts,
+      computeDragOpts
     };
     const $xeTree = {
       xID,
@@ -39783,7 +39883,7 @@ function tree_createInternalData() {
       const el = refElem.value;
       return el ? el.parentElement : null;
     };
-    const calcTableHeight = key => {
+    const calcTreeHeight = key => {
       const {
         parentHeight
       } = reactData;
@@ -39804,9 +39904,9 @@ function tree_createInternalData() {
       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;
@@ -39842,10 +39942,12 @@ function tree_createInternalData() {
         keyMaps[nodeid] = {
           item,
           index,
+          $index: -1,
+          _index: -1,
           items,
           parent,
           nodes,
-          level: nodes.length,
+          level: nodes.length - 1,
           treeIndex: index,
           lineCount: 0,
           treeLoaded: false
@@ -39865,16 +39967,20 @@ function tree_createInternalData() {
       } = internalData;
       const childrenField = computeChildrenField.value;
       const mapChildrenField = computeMapChildrenField.value;
+      let vtIndex = 0;
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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: [],
@@ -39885,6 +39991,7 @@ function tree_createInternalData() {
           };
           nodeMaps[nodeid] = rest;
         }
+        vtIndex++;
       }, {
         children: transform ? mapChildrenField : childrenField
       });
@@ -40030,7 +40137,8 @@ function tree_createInternalData() {
         scrollYLoad
       } = reactData;
       const {
-        scrollYStore
+        scrollYStore,
+        nodeMaps
       } = internalData;
       let fullList = internalData.afterVisibleList;
       if (force) {
@@ -40040,6 +40148,13 @@ function tree_createInternalData() {
         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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().debounce(() => handleData(true), 350, {
@@ -40286,6 +40401,40 @@ function tree_createInternalData() {
       internalData.lastScrollLeft = 0;
       return (0,external_commonjs_vue_commonjs2_vue_root_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 = 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,
@@ -41120,6 +41269,8 @@ function tree_createInternalData() {
             nodeMaps[itemNodeId] = {
               item: childRow,
               index: -1,
+              $index: -1,
+              _index: -1,
               items,
               parent: parent || parentNodeItem.item,
               nodes: parentNodes.concat(nodes),
@@ -41160,6 +41311,12 @@ function tree_createInternalData() {
         return list;
       },
       recalculate,
+      getFullData() {
+        const {
+          treeFullData
+        } = internalData;
+        return treeFullData.slice(0);
+      },
       scrollTo: handleScrollTo,
       scrollToNode(node) {
         return $xeTree.scrollToNodeId(getNodeId(node));
@@ -41200,8 +41357,562 @@ function tree_createInternalData() {
       },
       clearScroll
     };
-    const treePrivateMethods = {};
+    const clearNodeDropOrigin = () => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'node--drag-origin';
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          elem.draggable = false;
+          dom_removeClass(elem, clss);
+        });
+      }
+    };
+    const updateNodeDropOrigin = node => {
+      const el = refElem.value;
+      if (el) {
+        const clss = 'node--drag-origin';
+        const nodeid = getNodeId(node);
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.vxe-tree--node-wrapper[nodeid="${nodeid}"]`), elem => {
+          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 = 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 = {};
+              external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 (index_esm_VxeUI.modal) {
+                        index_esm_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 (index_esm_VxeUI.modal) {
+                      index_esm_VxeUI.modal.message({
+                        status: 'error',
+                        content: getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return errRest;
+                  }
+                }
+              } else {
+                // 根到根
+              }
+              const fullList = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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) {
+                external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(dragNode[childrenField], childNode => {
+                  childNode[parentField] = dragNode[parentField];
+                });
+              }
+              dragNode[parentField] = isDragToChildFlag ? prevDragNode[keyField] : prevDragNode[parentField];
+              internalData.treeFullData = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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,external_commonjs_vue_commonjs2_vue_root_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(','));
+                  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 ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            class: ['vxe-tree--drag-handle', {
+              'is--disabled': isDisabled
+            }],
+            ...ons
+          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+            class: icon || getIcon().TREE_DRAG
+          })]);
+        }
+      }
+      return renderEmptyElement($xeTree);
+    };
     const renderRadio = (node, nodeid, isChecked) => {
       const {
         showRadio
@@ -41283,6 +41994,8 @@ function tree_createInternalData() {
     const renderNode = (node, nodeid) => {
       const {
         lazy,
+        drag,
+        transform,
         showRadio,
         showCheckbox,
         showLine,
@@ -41336,10 +42049,29 @@ function tree_createInternalData() {
         node,
         isExpand
       };
+      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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: nodeid,
         class: ['vxe-tree--node-wrapper', `node--level-${nLevel}`],
-        nodeid
+        nodeid,
+        ...itemOn
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: ['vxe-tree--node-item', {
           'is--current': currentNode && nodeid === getNodeId(currentNode),
@@ -41347,13 +42079,7 @@ function tree_createInternalData() {
           '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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-line-wrapper'
@@ -41371,7 +42097,7 @@ function tree_createInternalData() {
         }
       }, iconSlot ? vn_getSlotVNs(iconSlot(nParams)) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
         class: isLazyLoading ? iconLoaded || getIcon().TREE_NODE_LOADED : isExpand ? iconOpen || getIcon().TREE_NODE_OPEN : iconClose || getIcon().TREE_NODE_CLOSE
-      })])] : []), renderRadio(node, nodeid, isRadioChecked), renderCheckbox(node, nodeid, isCheckboxChecked), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })])] : []), renderDragIcon(node, nodeid), renderRadio(node, nodeid, isRadioChecked), renderCheckbox(node, nodeid, isCheckboxChecked), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-inner'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-tree--node-item-title'
@@ -41407,6 +42133,43 @@ function tree_createInternalData() {
       });
       return nodeVNs;
     };
+    const renderDragTip = () => {
+      const {
+        drag
+      } = props;
+      const {
+        dragNode,
+        dragTipText
+      } = reactData;
+      const dragOpts = computeDragOpts.value;
+      const dNode = dragNode;
+      if (drag) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-tree--drag-wrapper'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refDragNodeLineElem,
+          class: ['vxe-tree--drag-node-line', {
+            'is--guides': dragOpts.showGuidesStatus
+          }]
+        }), dNode && dragOpts.showDragTip ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refDragTipElem,
+          class: 'vxe-tree--drag-sort-tip'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-tree--drag-sort-tip-wrapper'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-tree--drag-sort-tip-status'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: ['vxe-tree--drag-sort-tip-normal-status', getIcon().TREE_DRAG_STATUS_NODE]
+        }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: ['vxe-tree--drag-sort-tip-sub-status', getIcon().TREE_DRAG_STATUS_SUB_NODE]
+        }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+          class: ['vxe-tree--drag-sort-tip-disabled-status', getIcon().TREE_DRAG_DISABLED]
+        })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-tree--drag-sort-tip-content'
+        }, dragTipText)])]) : renderEmptyElement($xeTree)]);
+      }
+      return renderEmptyElement($xeTree);
+    };
     const renderVN = () => {
       const {
         loading,
@@ -41465,6 +42228,10 @@ function tree_createInternalData() {
       }, footerSlot({
         $tree: $xeTree
       })) : renderEmptyElement($xeTree),
+      /**
+       * 拖拽提示
+       */
+      renderDragTip(),
       /**
        * 加载中
        */
@@ -44977,6 +45744,9 @@ if (typeof window !== 'undefined') {
   if (window.VxeUI && !window.VxeUIBase) {
     window.VxeUIBase = components_namespaceObject;
   }
+  if (window.VxeUIBase && !window.VxeUI) {
+    window.VxeUI = components_namespaceObject;
+  }
 }
 
 /* harmony default export */ var index = (components_namespaceObject);