vxe-table 3.11.26 → 3.11.27-beta.1

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.11.26";
+const version = "3.11.27-beta.1";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2627,6 +2627,7 @@ var es_array_push = __webpack_require__(4114);
 
 const reClsMap = {};
 const browse = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
+const tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
 function getPropClass(property, params) {
   return property ? XEUtils.isFunction(property) ? property(params) : property : '';
 }
@@ -2789,7 +2790,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.11.26"}`;
+const log_version = `table v${"3.11.27-beta.1"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -3097,7 +3098,6 @@ function assembleColumn(_vm) {
     columnConfig
   } = _vm;
   const groupConfig = $xecolumn ? $xecolumn.columnConfig : null;
-  columnConfig.slots = _vm.$scopedSlots;
   if (groupConfig) {
     if (true) {
       if ($xecolumn.$options._componentTag === 'vxe-table-column') {
@@ -3629,12 +3629,13 @@ function renderHeaderCellDragIcon(h, params) {
   const {
     showIcon,
     icon,
+    isCrossDrag,
     visibleMethod,
     disabledMethod
   } = columnDragOpts;
   const isDisabled = disabledMethod && disabledMethod(params);
   if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
-    if (!(column.fixed || column.parentId)) {
+    if (!column.fixed && (isCrossDrag || !column.parentId)) {
       return h('span', {
         key: 'dg',
         class: ['vxe-cell--drag-handle', {
@@ -4638,10 +4639,13 @@ const Cell = {
   }
 };
 /* harmony default export */ var cell = (Cell);
+;// CONCATENATED MODULE: ./packages/ui/src/comp.ts
+const defineVxeComponent = options => options;
 ;// CONCATENATED MODULE: ./packages/table/src/column.ts
 
 
-const props = {
+
+const columnProps = {
   // 列唯一主键
   colId: [String, Number],
   // 渲染类型 seq,radio,checkbox,expand,html
@@ -4757,9 +4761,9 @@ const props = {
   // 额外的参数
   params: Object
 };
-const watch = {};
-Object.keys(props).forEach(name => {
-  watch[name] = function (value) {
+const columnWatch = {};
+Object.keys(columnProps).forEach(name => {
+  columnWatch[name] = function (value) {
     this.columnConfig.update(name, value);
     if (this.$xetable) {
       if (name === 'filters') {
@@ -4771,9 +4775,9 @@ Object.keys(props).forEach(name => {
     }
   };
 });
-/* harmony default export */ var column = ({
+/* harmony default export */ var column = (defineVxeComponent({
   name: 'VxeColumn',
-  props,
+  props: columnProps,
   provide() {
     return {
       $xecolumn: this,
@@ -4788,11 +4792,12 @@ Object.keys(props).forEach(name => {
       default: null
     }
   },
-  watch,
+  watch: columnWatch,
   created() {
     this.columnConfig = this.createColumn(this.$xetable, this);
   },
   mounted() {
+    this.columnConfig.slots = this.$scopedSlots;
     assembleColumn(this);
   },
   destroyed() {
@@ -4802,7 +4807,7 @@ Object.keys(props).forEach(name => {
     return h('div', this.$slots.default);
   },
   methods: cell
-});
+}));
 ;// CONCATENATED MODULE: ./packages/column/index.ts
 
 
@@ -4823,16 +4828,49 @@ const Column = VxeColumn;
 /* harmony default export */ var packages_column = ((/* unused pure expression or super */ null && (VxeColumn)));
 ;// CONCATENATED MODULE: ./packages/table/src/group.ts
 
-/* harmony default export */ var group = ({
+
+
+
+/* harmony default export */ var group = (defineVxeComponent({
   name: 'VxeColgroup',
-  extends: column,
+  props: columnProps,
   provide() {
     return {
-      xecolgroup: this,
+      $xecolumn: this,
       $xegrid: null
     };
-  }
-});
+  },
+  inject: {
+    $xetable: {
+      default: null
+    },
+    $xecolumn: {
+      default: null
+    }
+  },
+  watch: columnWatch,
+  created() {
+    this.columnConfig = this.createColumn(this.$xetable, this);
+  },
+  mounted() {
+    const {
+      $scopedSlots
+    } = this;
+    const columnSlots = {};
+    if ($scopedSlots.header) {
+      columnSlots.header = $scopedSlots.header;
+    }
+    this.columnConfig.slots = columnSlots;
+    assembleColumn(this);
+  },
+  destroyed() {
+    destroyColumn(this);
+  },
+  render(h) {
+    return h('div', this.$slots.default);
+  },
+  methods: cell
+}));
 ;// CONCATENATED MODULE: ./packages/colgroup/index.ts
 
 
@@ -5384,11 +5422,18 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
     if (cdLineEl) {
       if (showLine) {
         const thRect = thEl.getBoundingClientRect();
+        const offsetTop = Math.max(0, thRect.y - wrapperRect.y);
         cdLineEl.style.display = 'block';
+        cdLineEl.style.top = `${offsetTop}px`;
         cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`;
         cdLineEl.style.width = `${thRect.width}px`;
-        cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+        if (prevDragToChild) {
+          cdLineEl.style.height = `${thRect.height}px`;
+        } else {
+          cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`;
+        }
         cdLineEl.setAttribute('drag-pos', dragPos);
+        cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
       } else {
         cdLineEl.style.display = '';
       }
@@ -5950,12 +5995,12 @@ const Methods = {
           height: 0
         };
       }
+      cacheItem.row = row;
+      cacheItem.items = items;
+      cacheItem.parent = parent;
+      cacheItem.level = level;
+      cacheItem.index = treeConfig && parent ? -1 : index;
       if (isSource) {
-        cacheItem.row = row;
-        cacheItem.items = items;
-        cacheItem.parent = parent;
-        cacheItem.level = level;
-        cacheItem.index = treeConfig && parent ? -1 : index;
         fullDataRowIdMaps[rowid] = cacheItem;
       }
       fullAllDataRowIdMaps[rowid] = cacheItem;
@@ -6070,18 +6115,26 @@ const Methods = {
    * 牺牲数据组装的耗时，用来换取使用过程中的流畅
    */
   cacheColumnMap() {
+    const $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
       tableFullColumn,
-      collectColumn,
-      fullColumnMap,
-      showOverflow,
-      columnOpts,
-      rowOpts
-    } = this;
-    const fullColumnIdData = this.fullColumnIdData = {};
-    const fullColumnFieldData = this.fullColumnFieldData = {};
+      collectColumn
+    } = internalData;
+    const fullColumnIdData = internalData.fullColumnIdData = {};
+    const fullColumnFieldData = internalData.fullColumnFieldData = {};
+    const mouseOpts = $xeTable.computeMouseOpts;
+    const columnOpts = $xeTable.computeColumnOpts;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const {
+      isCrossDrag,
+      isSelfToChildDrag
+    } = columnDragOpts;
+    const rowOpts = $xeTable.computeRowOpts;
     const isGroup = collectColumn.some(hasChildrenList);
-    let isAllOverflow = !!showOverflow;
+    let isAllOverflow = !!props.showOverflow;
     let expandColumn;
     let treeNodeColumn;
     let checkboxColumn;
@@ -6097,6 +6150,8 @@ const Methods = {
         treeNode
       } = column;
       const rest = {
+        $index: -1,
+        _index: -1,
         column,
         colid,
         index,
@@ -6105,12 +6160,14 @@ const Methods = {
         width: 0
       };
       if (field) {
-        if (true) {
-          if (fullColumnFieldData[field]) {
-            warnLog('vxe.error.colRepet', ['field', field]);
-          }
+        if (fullColumnFieldData[field]) {
+          errLog('vxe.error.colRepet', ['field', field]);
         }
         fullColumnFieldData[field] = rest;
+      } else {
+        if (isCrossDrag || isSelfToChildDrag) {
+          errLog('vxe.error.emptyProp', ['column.field']);
+        }
       }
       if (!hasFixed && fixed) {
         hasFixed = fixed;
@@ -6154,27 +6211,6 @@ const Methods = {
           }
         }
       }
-      if (true) {
-        if (this.showOverflow && column.showOverflow === false) {
-          warnLog('vxe.error.errConflicts', [`table.show-overflow=${this.showOverflow}`, `column.show-overflow=${column.showOverflow}`]);
-        }
-        if (this.showHeaderOverflow && column.showHeaderOverflow === false) {
-          warnLog('vxe.error.errConflicts', [`table.show-header-overflow=${this.showHeaderOverflow}`, `column.show-header-overflow=${column.showHeaderOverflow}`]);
-        }
-        if (this.showFooterOverflow && column.showFooterOverflow === false) {
-          warnLog('vxe.error.errConflicts', [`table.show-footer-overflow=${this.showFooterOverflow}`, `column.show-footer-overflow=${column.showFooterOverflow}`]);
-        }
-      }
-      if (true) {
-        if (htmlColumn) {
-          if (!columnOpts.useKey) {
-            errLog('vxe.error.reqProp', ['column-config.useKey', 'column.type=html']);
-          }
-          if (!rowOpts.useKey) {
-            errLog('vxe.error.reqProp', ['row-config.useKey', 'column.type=html']);
-          }
-        }
-      }
       if (isAllOverflow && column.showOverflow === false) {
         isAllOverflow = false;
       }
@@ -6182,9 +6218,7 @@ const Methods = {
         errLog('vxe.error.colRepet', ['colId', colid]);
       }
       fullColumnIdData[colid] = rest;
-      fullColumnMap.set(column, rest);
     };
-    fullColumnMap.clear();
     if (isGroup) {
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parent, nodes) => {
         column.level = nodes.length;
@@ -6194,14 +6228,24 @@ const Methods = {
       tableFullColumn.forEach(handleFunc);
     }
     if (true) {
-      if (expandColumn && this.mouseOpts.area) {
+      if (expandColumn && mouseOpts.area) {
         errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand']);
       }
     }
-    this.isGroup = isGroup;
-    this.treeNodeColumn = treeNodeColumn;
-    this.expandColumn = expandColumn;
-    this.isAllOverflow = isAllOverflow;
+    if (true) {
+      if (htmlColumn) {
+        if (!columnOpts.useKey) {
+          errLog('vxe.error.reqProp', ['column-config.useKey & column.type=html']);
+        }
+        if (!rowOpts.useKey) {
+          errLog('vxe.error.reqProp', ['row-config.useKey & column.type=html']);
+        }
+      }
+    }
+    reactData.isGroup = isGroup;
+    reactData.treeNodeColumn = treeNodeColumn;
+    reactData.expandColumn = expandColumn;
+    reactData.isAllOverflow = isAllOverflow;
   },
   /**
    * 根据 tr 元素获取对应的 row 信息
@@ -8010,6 +8054,10 @@ const Methods = {
       const {
         rceTimeout
       } = internalData;
+      const el = $xeTable.$refs.refElem;
+      if (!el || !el.clientWidth) {
+        $xeTable.autoCellWidth();
+      }
       if (rceTimeout) {
         clearTimeout(rceTimeout);
         $xeTable.$nextTick(() => {
@@ -10869,8 +10917,9 @@ const Methods = {
    * 行拖拽
    */
   handleRowDragDragstartEvent(evnt) {
-    const img = new Image();
     if (evnt.dataTransfer) {
+      const img = new Image();
+      img.src = tpImg;
       evnt.dataTransfer.setDragImage(img, 0, 0);
     }
   },
@@ -10954,8 +11003,8 @@ const Methods = {
                     return;
                   }
                   if (oldAllMaps[newRowid]) {
+                    isSelfToChildStatus = true;
                     if (!isSelfToChildDrag) {
-                      isSelfToChildStatus = true;
                       if (core_.VxeUI.modal) {
                         core_.VxeUI.modal.message({
                           status: 'error',
@@ -11031,7 +11080,7 @@ const Methods = {
           }
           reactData.isDragRowMove = true;
           $xeTable.handleTableData(treeConfig && transform);
-          $xeTable.cacheRowMap(true);
+          $xeTable.cacheRowMap();
           $xeTable.updateScrollYStatus();
           if (!(treeConfig && transform)) {
             $xeTable.updateAfterDataIndex();
@@ -11059,6 +11108,7 @@ const Methods = {
     }
     hideDropTip($xeTable);
     clearRowDropOrigin($xeTable);
+    internalData.prevDragToChild = false;
     reactData.dragRow = null;
     reactData.dragCol = null;
     setTimeout(() => {
@@ -11123,7 +11173,6 @@ const Methods = {
     const $xeTable = this;
     const props = $xeTable;
     const reactData = $xeTable;
-    evnt.stopPropagation();
     const {
       dragConfig
     } = props;
@@ -11167,8 +11216,9 @@ const Methods = {
    * 列拖拽
    */
   handleHeaderCellDragDragstartEvent(evnt) {
-    const img = new Image();
     if (evnt.dataTransfer) {
+      const img = new Image();
+      img.src = tpImg;
       evnt.dataTransfer.setDragImage(img, 0, 0);
     }
   },
@@ -11182,6 +11232,9 @@ const Methods = {
     } = props;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const {
+      isCrossDrag,
+      isSelfToChildDrag,
+      isToChildDrag,
       dragEndMethod
     } = columnDragOpts;
     const {
@@ -11190,38 +11243,126 @@ const Methods = {
     const {
       collectColumn,
       prevDragCol,
-      prevDragPos
+      prevDragPos,
+      prevDragToChild
     } = internalData;
     const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
     if (prevDragCol && dragCol) {
       // 判断是否有拖动
       if (prevDragCol !== dragCol) {
+        const oldColumn = dragCol;
+        const newColumn = prevDragCol;
         Promise.resolve(dragEndMethod ? dragEndMethod({
-          oldColumn: dragCol,
-          newColumn: prevDragCol,
+          oldColumn,
+          newColumn,
           dragPos: prevDragPos,
           offsetIndex: dragOffsetIndex
         }) : true).then(status => {
           if (!status) {
             return;
           }
+          let oafIndex = -1;
+          let nafIndex = -1;
+          const oldAllMaps = {};
+          external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([oldColumn], column => {
+            oldAllMaps[column.id] = column;
+          });
+          let isSelfToChildStatus = false;
+          if (oldColumn.parentId && newColumn.parentId) {
+            // 子到子
+            if (!isCrossDrag) {
+              return;
+            }
+            if (oldAllMaps[newColumn.id]) {
+              isSelfToChildStatus = true;
+              if (!isSelfToChildDrag) {
+                if (core_.VxeUI.modal) {
+                  core_.VxeUI.modal.message({
+                    status: 'error',
+                    content: methods_getI18n('vxe.error.treeDragChild')
+                  });
+                }
+                return;
+              }
+            }
+          } else if (oldColumn.parentId) {
+            // 子到根
+            if (!isCrossDrag) {
+              return;
+            }
+          } else if (newColumn.parentId) {
+            // 根到子
+            if (!isCrossDrag) {
+              return;
+            }
+            if (oldAllMaps[newColumn.id]) {
+              isSelfToChildStatus = true;
+              if (!isSelfToChildDrag) {
+                if (core_.VxeUI.modal) {
+                  core_.VxeUI.modal.message({
+                    status: 'error',
+                    content: methods_getI18n('vxe.error.treeDragChild')
+                  });
+                }
+                return;
+              }
+            }
+          } else {
+            // 根到根
+          }
+          const oldewMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === oldColumn.id);
+          // 改变层级
+          if (isSelfToChildStatus && isSelfToChildDrag) {
+            if (oldewMatchRest) {
+              const {
+                items: oCols,
+                index: oIndex
+              } = oldewMatchRest;
+              const childList = oldColumn.children || [];
+              childList.forEach(column => {
+                column.parentId = oldColumn.parentId;
+              });
+              oCols.splice(oIndex, 1, ...childList);
+              oldColumn.children = [];
+            }
+          } else {
+            if (oldewMatchRest) {
+              const {
+                items: oCols,
+                index: oIndex,
+                parent: oParent
+              } = oldewMatchRest;
+              oCols.splice(oIndex, 1);
+              if (!oParent) {
+                oafIndex = oIndex;
+              }
+            }
+          }
+          const newMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === newColumn.id);
+          if (newMatchRest) {
+            const {
+              items: nCols,
+              index: nIndex,
+              parent: nParent
+            } = newMatchRest;
+            // 转子级
+            if (isToChildDrag && prevDragToChild) {
+              oldColumn.parentId = newColumn.id;
+              newColumn.children = (newColumn.children || []).concat([oldColumn]);
+            } else {
+              oldColumn.parentId = newColumn.parentId;
+              nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn);
+            }
+            if (!nParent) {
+              nafIndex = nIndex;
+            }
+          }
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parent) => {
             if (!parent) {
               const sortIndex = index + 1;
               column.renderSortNumber = sortIndex;
             }
           });
-          const oafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(collectColumn, item => item.id === dragCol.id);
-          const nafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex;
-          const newTargetCol = collectColumn[nafIndex];
-          if (newTargetCol) {
-            // 插入最后位置
-            dragCol.renderSortNumber = newTargetCol.renderSortNumber;
-            newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5;
-          } else {
-            // 插入新位置
-            dragCol.renderSortNumber = collectColumn.length + 1.5;
-          }
           reactData.isDragColMove = true;
           if (mouseConfig) {
             if ($xeTable.clearSelected) {
@@ -11232,14 +11373,12 @@ const Methods = {
               $xeTable.clearCopyCellArea();
             }
           }
-          $xeTable.analyColumnWidth();
-          $xeTable.$nextTick().then(() => {
+          $xeTable.refreshColumn(true).then(() => {
             $xeTable.updateCellAreas();
-            $xeTable.refreshColumn(true);
           });
           $xeTable.dispatchEvent('column-dragend', {
-            oldColumn: dragCol,
-            newColumn: prevDragCol,
+            oldColumn,
+            newColumn,
             dragPos: prevDragPos,
             offsetIndex: dragOffsetIndex,
             _index: {
@@ -11253,6 +11392,7 @@ const Methods = {
     }
     hideDropTip($xeTable);
     clearColDropOrigin($xeTable);
+    internalData.prevDragToChild = false;
     reactData.dragRow = null;
     reactData.dragCol = null;
     setTimeout(() => {
@@ -11266,10 +11406,16 @@ const Methods = {
     const {
       dragCol
     } = reactData;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const {
+      isToChildDrag,
+      isCrossDrag
+    } = columnDragOpts;
     if (!dragCol) {
       evnt.preventDefault();
       return;
     }
+    const hasCtrlKey = evnt.ctrlKey;
     const thEl = evnt.currentTarget;
     const colid = thEl.getAttribute('colid');
     const column = $xeTable.getColumnById(colid);
@@ -11280,11 +11426,11 @@ const Methods = {
       } = reactData;
       const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
       const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
-      if (dragCol.id === column.id || column.parentId) {
+      if (dragCol && dragCol.id === column.id || !isCrossDrag && column.parentId) {
         showDropTip($xeTable, evnt, null, thEl, false, dragPos);
         return;
       }
-      internalData.prevDragToChild = false;
+      internalData.prevDragToChild = !!(isToChildDrag && hasCtrlKey);
       internalData.prevDragCol = column;
       internalData.prevDragPos = dragPos;
       showDropTip($xeTable, evnt, null, thEl, true, dragPos);
@@ -11298,7 +11444,6 @@ const Methods = {
   handleHeaderCellDragMousedownEvent(evnt, params) {
     const $xeTable = this;
     const reactData = $xeTable;
-    evnt.stopPropagation();
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const {
       dragStartMethod
@@ -13748,7 +13893,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
       'col--valid-error': !!errorValidItem,
       'col--current': currentColumn === column
     }, getClass(compCellClassName, params), getClass(className, params), getClass(allCellClassName, params)],
-    key: columnKey || columnOpts.useKey || rowOpts.useKey ? column.id : $columnIndex,
+    key: columnKey || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? column.id : $columnIndex,
     attrs,
     style: Object.assign({
       height: cellHeight
@@ -13886,7 +14031,7 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
         rowid
       },
       style: rowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
-      key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+      key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || treeConfig ? rowid : $rowIndex,
       nativeOn: trOn
     }, tdVNs) : h('tr', {
       class: trClass,
@@ -15233,7 +15378,7 @@ function footer_renderHeads(h, _vm, footerTableData) {
 const {
   getConfig: props_getConfig
 } = core_.VxeUI;
-/* harmony default export */ var src_props = ({
+/* harmony default export */ var props = ({
   /** 基本属性 */
   id: [String, Function],
   // 数据
@@ -15498,23 +15643,73 @@ const {
   getIcon: panel_getIcon,
   renderEmptyElement: panel_renderEmptyElement
 } = core_.VxeUI;
-function updateDropHint(_vm, evnt) {
+function panel_showDropTip(_vm, evnt, optEl, showLine, dragPos) {
   const {
-    $refs
+    prevDragToChild
   } = _vm;
-  const dragHintEl = $refs.dragHintElemRef;
-  const bodyEl = $refs.bodyElemRef;
-  if (!bodyEl) {
+  const el = _vm.$refs.bodyElemRef;
+  if (!el) {
     return;
   }
-  if (dragHintEl) {
-    const wrapperEl = bodyEl.parentNode;
-    const wrapperRect = wrapperEl.getBoundingClientRect();
-    dragHintEl.style.display = 'block';
-    dragHintEl.style.top = `${Math.min(wrapperEl.clientHeight - wrapperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
-    dragHintEl.style.left = `${Math.min(wrapperEl.clientWidth - wrapperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+  const wrapperRect = el.getBoundingClientRect();
+  if (optEl) {
+    const dragLineEl = _vm.$refs.refDragLineElem;
+    if (dragLineEl) {
+      if (showLine) {
+        const optRect = optEl.getBoundingClientRect();
+        dragLineEl.style.display = 'block';
+        dragLineEl.style.top = `${Math.max(1, optRect.y - wrapperRect.y)}px`;
+        dragLineEl.style.height = `${optRect.height}px`;
+        dragLineEl.style.width = `${optRect.width}px`;
+        dragLineEl.setAttribute('drag-pos', dragPos);
+        dragLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
+      } else {
+        dragLineEl.style.display = '';
+      }
+    }
+  }
+  const dragTipEl = _vm.$refs.refDragTipElem;
+  if (dragTipEl) {
+    dragTipEl.style.display = 'block';
+    dragTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - dragTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+    dragTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - dragTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+    dragTipEl.setAttribute('drag-status', showLine ? prevDragToChild ? 'sub' : 'normal' : 'disabled');
+  }
+}
+function panel_hideDropTip(_vm) {
+  const dragTipEl = _vm.$refs.refDragTipElem;
+  const dragLineEl = _vm.$refs.refDragLineElem;
+  if (dragTipEl) {
+    dragTipEl.style.display = '';
+  }
+  if (dragLineEl) {
+    dragLineEl.style.display = '';
   }
 }
+const renderDragTip = (h, _vm) => {
+  const {
+    dragCol
+  } = _vm;
+  return h('div', {}, [h('div', {
+    ref: 'refDragLineElem',
+    class: 'vxe-table-custom-popup--drag-line'
+  }), h('div', {
+    ref: 'refDragTipElem',
+    class: 'vxe-table-custom-popup--drag-tip'
+  }, [h('div', {
+    class: 'vxe-table-custom-popup--drag-tip-wrapper'
+  }, [h('div', {
+    class: 'vxe-table-custom-popup--drag-tip-status'
+  }, [h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-normal-status', panel_getIcon().TABLE_DRAG_STATUS_ROW]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-sub-status', panel_getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-disabled-status', panel_getIcon().TABLE_DRAG_DISABLED]
+  })]), h('div', {
+    class: 'vxe-table--drag-tip-content'
+  }, panel_getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']))])])]);
+};
 const renderSimplePanel = (h, _vm) => {
   const VxeUIButtonComponent = core_.VxeUI.getComponent('VxeButton');
   const props = _vm;
@@ -15528,6 +15723,10 @@ const renderSimplePanel = (h, _vm) => {
     customColumnList
   } = reactData;
   const customOpts = $xeTable.computeCustomOpts;
+  const {
+    immediate
+  } = customOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     maxHeight
   } = customStore;
@@ -15541,6 +15740,9 @@ const renderSimplePanel = (h, _vm) => {
     placement
   } = customOpts;
   const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+  const {
+    isCrossDrag
+  } = columnDragOpts;
   const slots = customOpts.slots || {};
   const headerSlot = slots.header;
   const topSlot = slots.top;
@@ -15551,7 +15753,6 @@ const renderSimplePanel = (h, _vm) => {
   const customWrapperOns = {};
   const isAllChecked = customStore.isAll;
   const isAllIndeterminate = customStore.isIndeterminate;
-  const dragColumn = _vm.dragColumn;
   // hover 触发
   if (trigger === 'hover') {
     customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent;
@@ -15610,16 +15811,18 @@ const renderSimplePanel = (h, _vm) => {
         }
       }, [h('span', {
         class: ['vxe-checkbox--icon', isIndeterminate ? panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? panel_getIcon().TABLE_CHECKBOX_CHECKED : panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })]) : panel_renderEmptyElement($xeTable), allowSort && column.level === 1 ? h('div', {
+      })]) : panel_renderEmptyElement($xeTable), h('div', {
+        class: 'vxe-table-custom--name-option'
+      }, [allowSort && ((isCrossDrag ? immediate : false) || column.level === 1) ? h('div', {
         class: 'vxe-table-custom--sort-option'
       }, [h('span', {
         class: ['vxe-table-custom--sort-btn', {
-          'is--disabled': isDisabled || isHidden
+          'is--disabled': isDisabled || isHidden || column.renderFixed
         }],
         attrs: {
           title: panel_getI18n('vxe.custom.setting.sortHelpTip')
         },
-        on: isDisabled || isHidden ? {} : {
+        on: isDisabled || isHidden || column.renderFixed ? {} : {
           mousedown: _vm.sortMousedownEvent,
           mouseup: _vm.sortMouseupEvent
         }
@@ -15637,7 +15840,7 @@ const renderSimplePanel = (h, _vm) => {
         attrs: {
           title: colTitle
         }
-      }, colTitle), !parent && allowFixed ? h('div', {
+      }, colTitle)]), !parent && allowFixed ? h('div', {
         class: 'vxe-table-custom--fixed-option'
       }, [h(VxeUIButtonComponent, {
         props: {
@@ -15715,10 +15918,7 @@ const renderSimplePanel = (h, _vm) => {
     on: customWrapperOns
   }, colVNs), bottomSlot ? h('div', {
     class: 'vxe-table-custom--panel-bottom'
-  }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), h('div', {
-    ref: 'dragHintElemRef',
-    class: 'vxe-table-custom-popup--drag-hint'
-  }, panel_getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))]), customOpts.showFooter ? h('div', {
+  }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), renderDragTip(h, _vm)]), customOpts.showFooter ? h('div', {
     class: 'vxe-table-custom--footer'
   }, footerSlot ? $xeTable.callSlot(footerSlot, params, h) : [h('div', {
     class: 'vxe-table-custom--footer-buttons'
@@ -15731,7 +15931,7 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.resetCustomEvent
     }
-  }), customOpts.immediate ? h(VxeUIButtonComponent, {
+  }), immediate ? h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
       content: customOpts.closeButtonText || panel_getI18n('vxe.table.customClose')
@@ -15747,7 +15947,7 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.cancelCustomEvent
     }
-  }), customOpts.immediate ? panel_renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
+  }), immediate ? panel_renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
       status: 'primary',
@@ -15763,7 +15963,6 @@ const renderPopupPanel = (h, _vm) => {
   const VxeUIDrawerComponent = core_.VxeUI.getComponent('VxeDrawer');
   const VxeUIButtonComponent = core_.VxeUI.getComponent('VxeButton');
   const VxeUINumberInputComponent = core_.VxeUI.getComponent('VxeInput');
-  const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
   const $xeTableCustomPanel = _vm;
   const props = _vm;
   const $xeTable = _vm.$xeTable;
@@ -15780,6 +15979,10 @@ const renderPopupPanel = (h, _vm) => {
     customColumnList
   } = reactData;
   const customOpts = $xeTable.computeCustomOpts;
+  const {
+    immediate
+  } = customOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     mode,
     modalOptions,
@@ -15803,6 +16006,9 @@ const renderPopupPanel = (h, _vm) => {
   const modalOpts = Object.assign({}, modalOptions);
   const drawerOpts = Object.assign({}, drawerOptions);
   const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+  const {
+    isCrossDrag
+  } = columnDragOpts;
   const slots = customOpts.slots || {};
   const headerSlot = slots.header;
   const topSlot = slots.top;
@@ -15812,7 +16018,6 @@ const renderPopupPanel = (h, _vm) => {
   const trVNs = [];
   const isAllChecked = customStore.isAll;
   const isAllIndeterminate = customStore.isIndeterminate;
-  const dragColumn = _vm.dragColumn;
   const params = {
     $table: $xeTable,
     $grid: $xeTable.xegrid,
@@ -15885,40 +16090,43 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, [h('span', {
         class: ['vxe-checkbox--icon', isIndeterminate ? panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? panel_getIcon().TABLE_CHECKBOX_CHECKED : panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })])]) : panel_renderEmptyElement($xeTable), allowSort ? h('td', {
-        class: 'vxe-table-custom-popup--column-item col--sort'
-      }, [column.level === 1 ? h('span', {
+      })])]) : panel_renderEmptyElement($xeTable), h('td', {
+        class: 'vxe-table-custom-popup--column-item col--name'
+      }, [h('div', {
+        class: 'vxe-table-custom-popup--name'
+      }, [allowSort ? (isCrossDrag ? immediate : false) || column.level === 1 ? h('div', {
         class: ['vxe-table-custom-popup--column-sort-btn', {
-          'is--disabled': isDisabled || isHidden
+          'is--disabled': isDisabled || isHidden || column.renderFixed
         }],
         attrs: {
           title: panel_getI18n('vxe.custom.setting.sortHelpTip')
         },
-        on: isDisabled || isHidden ? {} : {
+        on: isDisabled || isHidden || column.renderFixed ? {} : {
           mousedown: _vm.sortMousedownEvent,
           mouseup: _vm.sortMouseupEvent
         }
       }, [h('i', {
         class: panel_getIcon().TABLE_CUSTOM_SORT
-      })]) : h('span', '-')]) : panel_renderEmptyElement($xeTable), h('td', {
-        class: 'vxe-table-custom-popup--column-item col--name'
-      }, [column.type === 'html' ? h('div', {
+      })]) : h('div', {
+        class: 'vxe-table-custom-popup--column-sort-placeholder'
+      }) : panel_renderEmptyElement($xeTable), column.type === 'html' ? h('div', {
         key: '1',
-        class: 'vxe-table-custom-popup--name',
+        class: 'vxe-table-custom-popup--title',
         domProps: {
           innerHTML: colTitle
         }
       }) : h('div', {
         key: '0',
-        class: 'vxe-table-custom-popup--name',
+        class: 'vxe-table-custom-popup--title',
         attrs: {
           title: colTitle
         }
-      }, colTitle)]), allowResizable ? h('td', {
+      }, colTitle)])]), allowResizable ? h('td', {
         class: 'vxe-table-custom-popup--column-item col--resizable'
       }, [column.children && column.children.length || !(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? h('span', '-') : VxeUINumberInputComponent ? h(VxeUINumberInputComponent, {
         props: {
           type: 'integer',
+          immediate: false,
           disabled: isDisabled || isHidden,
           value: column.renderResizeWidth,
           min: customMinWidth || undefined,
@@ -15927,6 +16135,9 @@ const renderPopupPanel = (h, _vm) => {
         on: {
           modelValue(value) {
             column.renderResizeWidth = Math.max(0, Number(value));
+          },
+          change() {
+            _vm.changeColumnWidth(column);
           }
         }
       }) : panel_renderEmptyElement($xeTableCustomPanel)]) : panel_renderEmptyElement($xeTable), allowFixed ? h('td', {
@@ -15953,7 +16164,7 @@ const renderPopupPanel = (h, _vm) => {
         },
         on: {
           input(value) {
-            column.renderFixed = value;
+            _vm.changeFixedOption(column, value);
           }
         }
       })]) : panel_renderEmptyElement($xeTable)]));
@@ -15973,8 +16184,6 @@ const renderPopupPanel = (h, _vm) => {
         class: 'vxe-table-custom-popup--table-wrapper'
       }, [h('table', {}, [h('colgroup', {}, [allowVisible ? h('col', {
         class: 'vxe-table-custom-popup--table-col-seq'
-      }) : panel_renderEmptyElement($xeTable), allowSort ? h('col', {
-        class: 'vxe-table-custom-popup--table-col-sort'
       }) : panel_renderEmptyElement($xeTable), h('col', {
         class: 'vxe-table-custom-popup--table-col-title'
       }), allowResizable ? h('col', {
@@ -15996,22 +16205,7 @@ const renderPopupPanel = (h, _vm) => {
         class: ['vxe-checkbox--icon', isAllIndeterminate ? panel_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? panel_getIcon().TABLE_CHECKBOX_CHECKED : panel_getIcon().TABLE_CHECKBOX_UNCHECKED]
       }), h('span', {
         class: 'vxe-checkbox--label'
-      }, panel_getI18n('vxe.toolbar.customAll'))])]) : panel_renderEmptyElement($xeTable), allowSort ? h('th', {}, [h('span', {
-        class: 'vxe-table-custom-popup--table-sort-help-title'
-      }, panel_getI18n('vxe.custom.setting.colSort')), VxeUITooltipComponent ? h(VxeUITooltipComponent, {
-        props: {
-          enterable: true,
-          content: panel_getI18n('vxe.custom.setting.sortHelpTip'),
-          popupClassName: 'vxe-table--ignore-clear'
-        },
-        scopedSlots: {
-          default: () => {
-            return h('i', {
-              class: 'vxe-table-custom-popup--table-sort-help-icon vxe-icon-question-circle-fill'
-            });
-          }
-        }
-      }) : panel_renderEmptyElement($xeTableCustomPanel)]) : panel_renderEmptyElement($xeTable), h('th', {}, panel_getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, panel_getI18n('vxe.custom.setting.colResizable')) : panel_renderEmptyElement($xeTable), allowFixed ? h('th', {}, panel_getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : panel_renderEmptyElement($xeTable)])]), h('transition-group', {
+      }, panel_getI18n('vxe.toolbar.customAll'))])]) : panel_renderEmptyElement($xeTable), h('th', {}, panel_getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, panel_getI18n('vxe.custom.setting.colResizable')) : panel_renderEmptyElement($xeTable), allowFixed ? h('th', {}, panel_getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : panel_renderEmptyElement($xeTable)])]), h('transition-group', {
         class: 'vxe-table-custom--panel-list',
         props: {
           tag: 'tbody',
@@ -16019,10 +16213,7 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, trVNs)])]), bottomSlot ? h('div', {
         class: 'vxe-table-custom-popup--table-bottom'
-      }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), h('div', {
-        ref: 'dragHintElemRef',
-        class: 'vxe-table-custom-popup--drag-hint'
-      }, panel_getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))]);
+      }, $xeTable.callSlot(bottomSlot, params, h)) : panel_renderEmptyElement($xeTable), renderDragTip(h, _vm)]);
     },
     footer: () => {
       if (footerSlot) {
@@ -16038,14 +16229,21 @@ const renderPopupPanel = (h, _vm) => {
         on: {
           click: _vm.resetCustomEvent
         }
-      }), h(VxeUIButtonComponent, {
+      }), immediate ? h(VxeUIButtonComponent, {
+        props: {
+          content: customOpts.resetButtonText || panel_getI18n('vxe.custom.customClose')
+        },
+        on: {
+          click: _vm.cancelCloseEvent
+        }
+      }) : h(VxeUIButtonComponent, {
         props: {
           content: customOpts.resetButtonText || panel_getI18n('vxe.custom.cstmCancel')
         },
         on: {
           click: _vm.cancelCustomEvent
         }
-      }), h(VxeUIButtonComponent, {
+      }), immediate ? panel_renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
         props: {
           status: 'primary',
           content: customOpts.confirmButtonText || panel_getI18n('vxe.custom.cstmConfirm')
@@ -16129,7 +16327,9 @@ const renderPopupPanel = (h, _vm) => {
   },
   data() {
     return {
-      dragColumn: null
+      prevDragCol: undefined,
+      prevDragToChild: false,
+      prevDragPos: null
     };
   },
   computed: {},
@@ -16139,7 +16339,6 @@ const renderPopupPanel = (h, _vm) => {
       const VxeUIDrawerComponent = core_.VxeUI.getComponent('VxeDrawer');
       const VxeUIButtonComponent = core_.VxeUI.getComponent('VxeButton');
       const VxeUINumberInputComponent = core_.VxeUI.getComponent('VxeNumberInput');
-      const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
       const VxeUIRadioGroupComponent = core_.VxeUI.getComponent('VxeRadioGroup');
       this.$nextTick(() => {
         const {
@@ -16163,9 +16362,6 @@ const renderPopupPanel = (h, _vm) => {
         if (!VxeUINumberInputComponent) {
           errLog('vxe.error.reqComp', ['vxe-input']);
         }
-        if (!VxeUITooltipComponent) {
-          errLog('vxe.error.reqComp', ['vxe-tooltip']);
-        }
         if (!VxeUIRadioGroupComponent) {
           errLog('vxe.error.reqComp', ['vxe-radio-group']);
         }
@@ -16212,6 +16408,8 @@ const renderPopupPanel = (h, _vm) => {
       $event
     }) {
       const $xeTable = this.$xeTable;
+      const reactData = $xeTable;
+      reactData.isCustomStatus = true;
       $xeTable.saveCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('confirm', $event);
@@ -16289,12 +16487,11 @@ const renderPopupPanel = (h, _vm) => {
       }
     },
     changeCheckboxOption(column) {
-      const {
-        $xetable
-      } = this;
+      const $xeTable = this.$xetable;
+      const reactData = $xeTable;
       const {
         customOpts
-      } = $xetable;
+      } = $xeTable.customOpts;
       const isChecked = !column.renderVisible;
       if (customOpts.immediate) {
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], item => {
@@ -16302,8 +16499,9 @@ const renderPopupPanel = (h, _vm) => {
           item.renderVisible = isChecked;
           item.halfVisible = false;
         });
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:visible');
+        reactData.isCustomStatus = true;
+        $xeTable.handleCustom();
+        $xeTable.saveCustomStore('update:visible');
       } else {
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], item => {
           item.renderVisible = isChecked;
@@ -16311,16 +16509,27 @@ const renderPopupPanel = (h, _vm) => {
         });
       }
       this.handleOptionCheck(column);
-      $xetable.checkCustomStatus();
+      $xeTable.checkCustomStatus();
+    },
+    changeColumnWidth(column) {
+      const $xeTable = this.$xetable;
+      const reactData = $xeTable;
+      const customOpts = $xeTable.computeCustomOpts;
+      if (customOpts.immediate) {
+        if (column.renderResizeWidth !== column.renderWidth) {
+          column.resizeWidth = column.renderResizeWidth;
+          column.renderWidth = column.renderResizeWidth;
+          reactData.isCustomStatus = true;
+          $xeTable.handleCustom();
+          $xeTable.saveCustomStore('update:width');
+        }
+      }
     },
     changeFixedOption(column, colFixed) {
-      const {
-        $xetable
-      } = this;
-      const {
-        isMaxFixedColumn,
-        customOpts
-      } = $xetable;
+      const $xeTable = this.$xetable;
+      const reactData = $xeTable;
+      const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+      const customOpts = $xeTable.computeCustomOpts;
       if (customOpts.immediate) {
         if (column.renderFixed === colFixed) {
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], col => {
@@ -16335,8 +16544,9 @@ const renderPopupPanel = (h, _vm) => {
             });
           }
         }
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:fixed');
+        reactData.isCustomStatus = true;
+        $xeTable.handleCustom();
+        $xeTable.saveCustomStore('update:fixed');
       } else {
         if (column.renderFixed === colFixed) {
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([column], col => {
@@ -16358,113 +16568,261 @@ const renderPopupPanel = (h, _vm) => {
       $xetable.toggleCustomAllCheckbox();
     },
     sortMousedownEvent(evnt) {
-      const {
-        $xetable
-      } = this;
+      const $xeTable = this.$xetable;
       const btnEl = evnt.currentTarget;
-      const tdEl = btnEl.parentNode;
-      const trEl = tdEl.parentNode;
+      const cellEl = btnEl.parentElement;
+      const tdEl = cellEl.parentElement;
+      const trEl = tdEl.parentElement;
       const colid = trEl.getAttribute('colid');
-      const column = $xetable.getColumnById(colid);
+      const column = $xeTable.getColumnById(colid);
       trEl.draggable = true;
-      this.dragColumn = column;
+      this.dragCol = column;
       addClass(trEl, 'active--drag-origin');
-      updateDropHint(this, evnt);
     },
     sortMouseupEvent(evnt) {
       const btnEl = evnt.currentTarget;
-      const tdEl = btnEl.parentNode;
-      const trEl = tdEl.parentNode;
-      const dragHintEl = this.$refs.dragHintElemRef;
+      const cellEl = btnEl.parentElement;
+      const tdEl = cellEl.parentElement;
+      const trEl = tdEl.parentElement;
+      panel_hideDropTip(this);
       trEl.draggable = false;
-      this.dragColumn = null;
+      this.dragCol = null;
       removeClass(trEl, 'active--drag-origin');
-      if (dragHintEl) {
-        dragHintEl.style.display = '';
-      }
     },
     sortDragstartEvent(evnt) {
-      const img = new Image();
       if (evnt.dataTransfer) {
+        const img = new Image();
+        img.src = tpImg;
         evnt.dataTransfer.setDragImage(img, 0, 0);
       }
     },
     sortDragendEvent(evnt) {
+      const $xeTable = this.$xetable;
+      const tableProps = $xeTable;
+      const reactData = $xeTable;
+      const internalData = $xeTable;
       const {
-        $xetable,
-        prevDropTrEl
+        dragCol,
+        prevDragPos,
+        prevDragCol,
+        prevDragToChild
       } = this;
       const {
-        customColumnList,
-        customOpts
-      } = $xetable;
+        mouseConfig
+      } = tableProps;
+      const {
+        customColumnList
+      } = reactData;
+      const {
+        collectColumn
+      } = internalData;
+      const customOpts = $xeTable.computeCustomOpts;
+      const {
+        immediate
+      } = customOpts;
       const trEl = evnt.currentTarget;
-      const dragHintEl = this.$refs.dragHintElemRef;
-      if (prevDropTrEl) {
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      const {
+        isCrossDrag,
+        isSelfToChildDrag,
+        isToChildDrag,
+        dragEndMethod
+      } = columnDragOpts;
+      const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+      if (prevDragCol && dragCol) {
         // 判断是否有拖动
-        if (prevDropTrEl !== trEl) {
-          const dragOffset = prevDropTrEl.getAttribute('drag-pos');
-          const colid = trEl.getAttribute('colid');
-          const column = $xetable.getColumnById(colid);
-          if (!column) {
-            return;
-          }
-          const cIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === column.id);
-          const targetColid = prevDropTrEl.getAttribute('colid');
-          const targetColumn = $xetable.getColumnById(targetColid);
-          if (!targetColumn) {
-            return;
-          }
-          // 移出源位置
-          customColumnList.splice(cIndex, 1);
-          const tcIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === targetColumn.id);
-          // 插新位置
-          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
+        if (prevDragCol !== dragCol) {
+          const oldColumn = dragCol;
+          const newColumn = prevDragCol;
+          Promise.resolve(dragEndMethod ? dragEndMethod({
+            oldColumn,
+            newColumn,
+            dragPos: prevDragPos,
+            offsetIndex: dragOffsetIndex
+          }) : true).then(status => {
+            if (!status) {
+              return;
+            }
+            let oafIndex = -1;
+            let nafIndex = -1;
+            const oldAllMaps = {};
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([oldColumn], column => {
+              oldAllMaps[column.id] = column;
+            });
+            let isSelfToChildStatus = false;
+            // 只有实时拖拽支持跨层级
+            if (immediate) {
+              if (oldColumn.parentId && newColumn.parentId) {
+                // 子到子
+                if (!isCrossDrag) {
+                  return;
+                }
+                if (oldAllMaps[newColumn.id]) {
+                  isSelfToChildStatus = true;
+                  if (!isSelfToChildDrag) {
+                    if (core_.VxeUI.modal) {
+                      core_.VxeUI.modal.message({
+                        status: 'error',
+                        content: panel_getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return;
+                  }
+                }
+              } else if (oldColumn.parentId) {
+                // 子到根
+                if (!isCrossDrag) {
+                  return;
+                }
+              } else if (newColumn.parentId) {
+                // 根到子
+                if (!isCrossDrag) {
+                  return;
+                }
+                if (oldAllMaps[newColumn.id]) {
+                  isSelfToChildStatus = true;
+                  if (!isSelfToChildDrag) {
+                    if (core_.VxeUI.modal) {
+                      core_.VxeUI.modal.message({
+                        status: 'error',
+                        content: panel_getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return;
+                  }
+                }
+              } else {
+                // 根到根
+              }
+              const oldewMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === oldColumn.id);
+              // 改变层级
+              if (isSelfToChildStatus && isSelfToChildDrag) {
+                if (oldewMatchRest) {
+                  const {
+                    items: oCols,
+                    index: oIndex
+                  } = oldewMatchRest;
+                  const childList = oldColumn.children || [];
+                  childList.forEach(column => {
+                    column.parentId = oldColumn.parentId;
+                  });
+                  oCols.splice(oIndex, 1, ...childList);
+                  oldColumn.children = [];
+                }
+              } else {
+                if (oldewMatchRest) {
+                  const {
+                    items: oCols,
+                    index: oIndex,
+                    parent: oParent
+                  } = oldewMatchRest;
+                  oCols.splice(oIndex, 1);
+                  if (!oParent) {
+                    oafIndex = oIndex;
+                  }
+                }
+              }
+              const newMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === newColumn.id);
+              if (newMatchRest) {
+                const {
+                  items: nCols,
+                  index: nIndex,
+                  parent: nParent
+                } = newMatchRest;
+                // 转子级
+                if (isToChildDrag && prevDragToChild) {
+                  oldColumn.parentId = newColumn.id;
+                  newColumn.children = (newColumn.children || []).concat([oldColumn]);
+                } else {
+                  oldColumn.parentId = newColumn.parentId;
+                  nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn);
+                }
+                if (!nParent) {
+                  nafIndex = nIndex;
+                }
+              }
+              external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parent) => {
+                if (!parent) {
+                  const sortIndex = index + 1;
+                  column.renderSortNumber = sortIndex;
+                }
+              });
+            } else {
+              oafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === oldColumn.id);
+              customColumnList.splice(oafIndex, 1);
+              nafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === newColumn.id);
+              customColumnList.splice(nafIndex + dragOffsetIndex, 0, oldColumn);
+            }
+            reactData.isDragColMove = true;
+            if (mouseConfig) {
+              if ($xeTable.clearSelected) {
+                $xeTable.clearSelected();
+              }
+              if ($xeTable.clearCellAreas) {
+                $xeTable.clearCellAreas();
+                $xeTable.clearCopyCellArea();
+              }
+            }
+            $xeTable.dispatchEvent('column-dragend', {
+              oldColumn,
+              newColumn,
+              dragPos: prevDragPos,
+              offsetIndex: dragOffsetIndex,
+              _index: {
+                newIndex: nafIndex,
+                oldIndex: oafIndex
+              }
+            }, evnt);
+            if (immediate) {
+              reactData.customColumnList = collectColumn.slice(0);
+              $xeTable.refreshColumn(true).then(() => {
+                $xeTable.updateCellAreas();
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore('update:sort');
+              });
+            }
+          }).catch(() => {});
         }
-        prevDropTrEl.draggable = false;
-        prevDropTrEl.removeAttribute('drag-pos');
-        removeClass(prevDropTrEl, 'active--drag-target');
       }
-      this.dragColumn = null;
+      panel_hideDropTip(this);
+      this.dragCol.value = null;
       trEl.draggable = false;
       trEl.removeAttribute('drag-pos');
-      if (dragHintEl) {
-        dragHintEl.style.display = '';
-      }
       removeClass(trEl, 'active--drag-target');
       removeClass(trEl, 'active--drag-origin');
-      if (customOpts.immediate) {
-        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(customColumnList, (column, index, items, path, parent) => {
-          if (!parent) {
-            const sortIndex = index + 1;
-            column.renderSortNumber = sortIndex;
-          }
-        });
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:sort');
-      }
     },
     sortDragoverEvent(evnt) {
+      const $xeTable = this.$xetable;
       const {
-        $xetable,
-        prevDropTrEl
+        dragCol
       } = this;
-      const trEl = evnt.currentTarget;
-      if (prevDropTrEl !== trEl) {
-        removeClass(prevDropTrEl, 'active--drag-target');
-      }
-      const colid = trEl.getAttribute('colid');
-      const column = $xetable.getColumnById(colid);
-      // 是否移入有效元行
-      if (column && column.level === 1) {
+      const customOpts = $xeTable.computeCustomOpts;
+      const {
+        immediate
+      } = customOpts;
+      const columnDragOpts = $xeTable.computeColumnDragOpts;
+      const {
+        isCrossDrag,
+        isToChildDrag
+      } = columnDragOpts;
+      const optEl = evnt.currentTarget;
+      const hasCtrlKey = evnt.ctrlKey;
+      const colid = optEl.getAttribute('colid');
+      const column = $xeTable.getColumnById(colid);
+      // 是否移入有效列
+      if (column && (isCrossDrag || column.level === 1)) {
         evnt.preventDefault();
-        const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
-        const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-        addClass(trEl, 'active--drag-target');
-        trEl.setAttribute('drag-pos', dragOffset);
-        this.prevDropTrEl = trEl;
+        const offsetY = evnt.clientY - optEl.getBoundingClientRect().y;
+        const dragPos = offsetY < optEl.clientHeight / 2 ? 'top' : 'bottom';
+        if (dragCol && dragCol.id === column.id || !isCrossDrag && column.level === 1 || !immediate && column.level > 1 || column.renderFixed) {
+          panel_showDropTip(this, evnt, optEl, false, dragPos);
+          return;
+        }
+        this.prevDragToChild = !!(isToChildDrag && hasCtrlKey && immediate);
+        this.prevDragCol = column;
+        this.prevDragPos = dragPos;
+        panel_showDropTip(this, evnt, optEl, true, dragPos);
       }
-      updateDropHint(this, evnt);
     }
   }
 });
@@ -22372,6 +22730,7 @@ function validErrorRuleValue(rule, val) {
     },
     _setCustomAllCheckbox(checked) {
       const $xeTable = this;
+      const reactData = $xeTable;
       const {
         customStore
       } = this;
@@ -22401,6 +22760,7 @@ function validErrorRuleValue(rule, val) {
           column.halfVisible = false;
         });
         customStore.isAll = isAll;
+        reactData.isCustomStatus = true;
         $xeTable.handleCustom();
         $xeTable.saveCustomStore('update:visible');
       } else {
@@ -22634,7 +22994,7 @@ const renderDragTipContents = (h, $xeTable) => {
   }
   return [h('span', dragTipText)];
 };
-const renderDragTip = (h, $xeTable) => {
+const table_renderDragTip = (h, $xeTable) => {
   const reactData = $xeTable;
   const {
     dragRow
@@ -22686,7 +23046,7 @@ function handleUupdateResize(_vm) {
 /* harmony default export */ var table = ({
   name: 'VxeTable',
   mixins: [table_globalMixins.sizeMixin, mixin, menu_mixin, edit_mixin, export_mixin, keyboard_mixin, validator_mixin, custom_mixin],
-  props: src_props,
+  props: props,
   provide() {
     return {
       $xetable: this,
@@ -23317,7 +23677,7 @@ function handleUupdateResize(_vm) {
       });
     },
     staticColumns(value) {
-      this.handleColumn(value);
+      this.handleColumn(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().clone(value));
     },
     tableColumn() {
       this.analyColumnWidth();
@@ -23977,7 +24337,7 @@ function handleUupdateResize(_vm) {
     /**
      * 拖拽提示
      */
-    renderDragTip(h, this), h('div', {}, [
+    table_renderDragTip(h, this), h('div', {}, [
     /**
      * 提示相关
      */
@@ -24011,8 +24371,6 @@ function handleUupdateResize(_vm) {
   },
   methods: methods
 });
-;// CONCATENATED MODULE: ./packages/ui/src/comp.ts
-const defineVxeComponent = options => options;
 ;// CONCATENATED MODULE: ./packages/toolbar/src/toolbar.ts
 
 
@@ -24800,7 +25158,7 @@ const {
   renderEmptyElement: grid_renderEmptyElement
 } = core_.VxeUI;
 const grid_methods = {};
-const propKeys = Object.keys(src_props);
+const propKeys = Object.keys(props);
 function renderDefaultForm(h, $xeGrid) {
   const VxeUIFormComponent = core_.VxeUI.getComponent('VxeForm');
   const props = $xeGrid;
@@ -25157,7 +25515,7 @@ Object.keys(table.methods).forEach(name => {
   name: 'VxeGrid',
   mixins: [grid_globalMixins.sizeMixin],
   props: {
-    ...src_props,
+    ...props,
     layouts: Array,
     columns: Array,
     pagerConfig: [Boolean, Object],
@@ -27422,8 +27780,8 @@ const Toolbar = VxeToolbar;
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {
@@ -27505,7 +27863,7 @@ const Toolbar = VxeToolbar;
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',
-        colTitle: '标题',
+        colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
         colFixed: '冻结列',