vxe-table 3.11.26 → 3.11.27-beta.1

package/lib/table/module/custom/panel.js

@@ -15,23 +15,73 @@ const {
   getIcon,
   renderEmptyElement
 } = _ui.VxeUI;
-function updateDropHint(_vm, evnt) {
+function 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 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', getIcon().TABLE_DRAG_STATUS_ROW]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
+  }), h('span', {
+    class: ['vxe-table-custom-popup--drag-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
+  })]), h('div', {
+    class: 'vxe-table--drag-tip-content'
+  }, getI18n('vxe.custom.cstmDragTarget', [dragCol && dragCol.type !== 'html' ? dragCol.getTitle() : '']))])])]);
+};
 const renderSimplePanel = (h, _vm) => {
   const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
   const props = _vm;
@@ -45,6 +95,10 @@ const renderSimplePanel = (h, _vm) => {
     customColumnList
   } = reactData;
   const customOpts = $xeTable.computeCustomOpts;
+  const {
+    immediate
+  } = customOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     maxHeight
   } = customStore;
@@ -58,6 +112,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;
@@ -68,7 +125,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;
@@ -127,16 +183,18 @@ const renderSimplePanel = (h, _vm) => {
         }
       }, [h('span', {
         class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })]) : renderEmptyElement($xeTable), allowSort && column.level === 1 ? h('div', {
+      })]) : 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: getI18n('vxe.custom.setting.sortHelpTip')
         },
-        on: isDisabled || isHidden ? {} : {
+        on: isDisabled || isHidden || column.renderFixed ? {} : {
           mousedown: _vm.sortMousedownEvent,
           mouseup: _vm.sortMouseupEvent
         }
@@ -154,7 +212,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: {
@@ -232,10 +290,7 @@ const renderSimplePanel = (h, _vm) => {
     on: customWrapperOns
   }, colVNs), bottomSlot ? h('div', {
     class: 'vxe-table-custom--panel-bottom'
-  }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), h('div', {
-    ref: 'dragHintElemRef',
-    class: 'vxe-table-custom-popup--drag-hint'
-  }, getI18n('vxe.custom.cstmDragTarget', [dragColumn && dragColumn.type !== 'html' ? dragColumn.getTitle() : '']))]), customOpts.showFooter ? h('div', {
+  }, $xeTable.callSlot(bottomSlot, params, h)) : 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'
@@ -248,7 +303,7 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.resetCustomEvent
     }
-  }), customOpts.immediate ? h(VxeUIButtonComponent, {
+  }), immediate ? h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
       content: customOpts.closeButtonText || getI18n('vxe.table.customClose')
@@ -264,7 +319,7 @@ const renderSimplePanel = (h, _vm) => {
     on: {
       click: _vm.cancelCustomEvent
     }
-  }), customOpts.immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
+  }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
     props: {
       mode: 'text',
       status: 'primary',
@@ -280,7 +335,6 @@ const renderPopupPanel = (h, _vm) => {
   const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
   const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
   const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeInput');
-  const VxeUITooltipComponent = _ui.VxeUI.getComponent('VxeTooltip');
   const $xeTableCustomPanel = _vm;
   const props = _vm;
   const $xeTable = _vm.$xeTable;
@@ -297,6 +351,10 @@ const renderPopupPanel = (h, _vm) => {
     customColumnList
   } = reactData;
   const customOpts = $xeTable.computeCustomOpts;
+  const {
+    immediate
+  } = customOpts;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     mode,
     modalOptions,
@@ -320,6 +378,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;
@@ -329,7 +390,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,
@@ -402,40 +462,43 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, [h('span', {
         class: ['vxe-checkbox--icon', isIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
-      })])]) : renderEmptyElement($xeTable), allowSort ? h('td', {
-        class: 'vxe-table-custom-popup--column-item col--sort'
-      }, [column.level === 1 ? h('span', {
+      })])]) : 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: getI18n('vxe.custom.setting.sortHelpTip')
         },
-        on: isDisabled || isHidden ? {} : {
+        on: isDisabled || isHidden || column.renderFixed ? {} : {
           mousedown: _vm.sortMousedownEvent,
           mouseup: _vm.sortMouseupEvent
         }
       }, [h('i', {
         class: getIcon().TABLE_CUSTOM_SORT
-      })]) : h('span', '-')]) : 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'
+      }) : 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 || !(_xeUtils.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,
@@ -444,6 +507,9 @@ const renderPopupPanel = (h, _vm) => {
         on: {
           modelValue(value) {
             column.renderResizeWidth = Math.max(0, Number(value));
+          },
+          change() {
+            _vm.changeColumnWidth(column);
           }
         }
       }) : renderEmptyElement($xeTableCustomPanel)]) : renderEmptyElement($xeTable), allowFixed ? h('td', {
@@ -470,7 +536,7 @@ const renderPopupPanel = (h, _vm) => {
         },
         on: {
           input(value) {
-            column.renderFixed = value;
+            _vm.changeFixedOption(column, value);
           }
         }
       })]) : renderEmptyElement($xeTable)]));
@@ -490,8 +556,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'
-      }) : renderEmptyElement($xeTable), allowSort ? h('col', {
-        class: 'vxe-table-custom-popup--table-col-sort'
       }) : renderEmptyElement($xeTable), h('col', {
         class: 'vxe-table-custom-popup--table-col-title'
       }), allowResizable ? h('col', {
@@ -513,22 +577,7 @@ const renderPopupPanel = (h, _vm) => {
         class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED]
       }), h('span', {
         class: 'vxe-checkbox--label'
-      }, getI18n('vxe.toolbar.customAll'))])]) : renderEmptyElement($xeTable), allowSort ? h('th', {}, [h('span', {
-        class: 'vxe-table-custom-popup--table-sort-help-title'
-      }, getI18n('vxe.custom.setting.colSort')), VxeUITooltipComponent ? h(VxeUITooltipComponent, {
-        props: {
-          enterable: true,
-          content: 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'
-            });
-          }
-        }
-      }) : renderEmptyElement($xeTableCustomPanel)]) : renderEmptyElement($xeTable), h('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, getI18n('vxe.custom.setting.colResizable')) : renderEmptyElement($xeTable), allowFixed ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : renderEmptyElement($xeTable)])]), h('transition-group', {
+      }, getI18n('vxe.toolbar.customAll'))])]) : renderEmptyElement($xeTable), h('th', {}, getI18n('vxe.custom.setting.colTitle')), allowResizable ? h('th', {}, getI18n('vxe.custom.setting.colResizable')) : renderEmptyElement($xeTable), allowFixed ? h('th', {}, getI18n(`vxe.custom.setting.${maxFixedSize ? 'colFixedMax' : 'colFixed'}`, [maxFixedSize])) : renderEmptyElement($xeTable)])]), h('transition-group', {
         class: 'vxe-table-custom--panel-list',
         props: {
           tag: 'tbody',
@@ -536,10 +585,7 @@ const renderPopupPanel = (h, _vm) => {
         }
       }, trVNs)])]), bottomSlot ? h('div', {
         class: 'vxe-table-custom-popup--table-bottom'
-      }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), h('div', {
-        ref: 'dragHintElemRef',
-        class: 'vxe-table-custom-popup--drag-hint'
-      }, getI18n('vxe.custom.cstmDragTarget', [dragColumn ? dragColumn.getTitle() : '']))]);
+      }, $xeTable.callSlot(bottomSlot, params, h)) : renderEmptyElement($xeTable), renderDragTip(h, _vm)]);
     },
     footer: () => {
       if (footerSlot) {
@@ -555,14 +601,21 @@ const renderPopupPanel = (h, _vm) => {
         on: {
           click: _vm.resetCustomEvent
         }
-      }), h(VxeUIButtonComponent, {
+      }), immediate ? h(VxeUIButtonComponent, {
+        props: {
+          content: customOpts.resetButtonText || getI18n('vxe.custom.customClose')
+        },
+        on: {
+          click: _vm.cancelCloseEvent
+        }
+      }) : h(VxeUIButtonComponent, {
         props: {
           content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
         },
         on: {
           click: _vm.cancelCustomEvent
         }
-      }), h(VxeUIButtonComponent, {
+      }), immediate ? renderEmptyElement($xeTable) : h(VxeUIButtonComponent, {
         props: {
           status: 'primary',
           content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
@@ -646,7 +699,9 @@ var _default = exports.default = {
   },
   data() {
     return {
-      dragColumn: null
+      prevDragCol: undefined,
+      prevDragToChild: false,
+      prevDragPos: null
     };
   },
   computed: {},
@@ -656,7 +711,6 @@ var _default = exports.default = {
       const VxeUIDrawerComponent = _ui.VxeUI.getComponent('VxeDrawer');
       const VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
       const VxeUINumberInputComponent = _ui.VxeUI.getComponent('VxeNumberInput');
-      const VxeUITooltipComponent = _ui.VxeUI.getComponent('VxeTooltip');
       const VxeUIRadioGroupComponent = _ui.VxeUI.getComponent('VxeRadioGroup');
       this.$nextTick(() => {
         const {
@@ -680,9 +734,6 @@ var _default = exports.default = {
         if (!VxeUINumberInputComponent) {
           (0, _log.errLog)('vxe.error.reqComp', ['vxe-input']);
         }
-        if (!VxeUITooltipComponent) {
-          (0, _log.errLog)('vxe.error.reqComp', ['vxe-tooltip']);
-        }
         if (!VxeUIRadioGroupComponent) {
           (0, _log.errLog)('vxe.error.reqComp', ['vxe-radio-group']);
         }
@@ -729,6 +780,8 @@ var _default = exports.default = {
       $event
     }) {
       const $xeTable = this.$xeTable;
+      const reactData = $xeTable;
+      reactData.isCustomStatus = true;
       $xeTable.saveCustom();
       $xeTable.closeCustom();
       $xeTable.emitCustomEvent('confirm', $event);
@@ -806,12 +859,11 @@ var _default = exports.default = {
       }
     },
     changeCheckboxOption(column) {
-      const {
-        $xetable
-      } = this;
+      const $xeTable = this.$xetable;
+      const reactData = $xeTable;
       const {
         customOpts
-      } = $xetable;
+      } = $xeTable.customOpts;
       const isChecked = !column.renderVisible;
       if (customOpts.immediate) {
         _xeUtils.default.eachTree([column], item => {
@@ -819,8 +871,9 @@ var _default = exports.default = {
           item.renderVisible = isChecked;
           item.halfVisible = false;
         });
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:visible');
+        reactData.isCustomStatus = true;
+        $xeTable.handleCustom();
+        $xeTable.saveCustomStore('update:visible');
       } else {
         _xeUtils.default.eachTree([column], item => {
           item.renderVisible = isChecked;
@@ -828,16 +881,27 @@ var _default = exports.default = {
         });
       }
       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) {
           _xeUtils.default.eachTree([column], col => {
@@ -852,8 +916,9 @@ var _default = exports.default = {
             });
           }
         }
-        $xetable.handleCustom();
-        $xetable.saveCustomStore('update:fixed');
+        reactData.isCustomStatus = true;
+        $xeTable.handleCustom();
+        $xeTable.saveCustomStore('update:fixed');
       } else {
         if (column.renderFixed === colFixed) {
           _xeUtils.default.eachTree([column], col => {
@@ -875,113 +940,261 @@ var _default = exports.default = {
       $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;
       (0, _dom.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;
+      hideDropTip(this);
       trEl.draggable = false;
-      this.dragColumn = null;
+      this.dragCol = null;
       (0, _dom.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 = _dom.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 = _xeUtils.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 = _xeUtils.default.findIndexOf(customColumnList, item => item.id === targetColumn.id);
-          // 插新位置
-          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column);
-        }
-        prevDropTrEl.draggable = false;
-        prevDropTrEl.removeAttribute('drag-pos');
-        (0, _dom.removeClass)(prevDropTrEl, 'active--drag-target');
+        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 = {};
+            _xeUtils.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 (_ui.VxeUI.modal) {
+                      _ui.VxeUI.modal.message({
+                        status: 'error',
+                        content: 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 (_ui.VxeUI.modal) {
+                      _ui.VxeUI.modal.message({
+                        status: 'error',
+                        content: getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return;
+                  }
+                }
+              } else {
+                // 根到根
+              }
+              const oldewMatchRest = _xeUtils.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 = _xeUtils.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;
+                }
+              }
+              _xeUtils.default.eachTree(collectColumn, (column, index, items, path, parent) => {
+                if (!parent) {
+                  const sortIndex = index + 1;
+                  column.renderSortNumber = sortIndex;
+                }
+              });
+            } else {
+              oafIndex = _xeUtils.default.findIndexOf(customColumnList, item => item.id === oldColumn.id);
+              customColumnList.splice(oafIndex, 1);
+              nafIndex = _xeUtils.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(() => {});
+        }
       }
-      this.dragColumn = null;
+      hideDropTip(this);
+      this.dragCol.value = null;
       trEl.draggable = false;
       trEl.removeAttribute('drag-pos');
-      if (dragHintEl) {
-        dragHintEl.style.display = '';
-      }
       (0, _dom.removeClass)(trEl, 'active--drag-target');
       (0, _dom.removeClass)(trEl, 'active--drag-origin');
-      if (customOpts.immediate) {
-        _xeUtils.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) {
-        (0, _dom.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';
-        (0, _dom.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) {
+          showDropTip(this, evnt, optEl, false, dragPos);
+          return;
+        }
+        this.prevDragToChild = !!(isToChildDrag && hasCtrlKey && immediate);
+        this.prevDragCol = column;
+        this.prevDragPos = dragPos;
+        showDropTip(this, evnt, optEl, true, dragPos);
       }
-      updateDropHint(this, evnt);
     }
   }
 };