vxe-table 3.11.27-beta.0 → 3.11.27

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

@@ -1,24 +1,85 @@
 import { VxeUI } from '../../../ui';
 import { formatText } from '../../../ui/src/utils';
-import { addClass, removeClass } from '../../../ui/src/dom';
+import { tpImg, addClass, removeClass } from '../../../ui/src/dom';
 import { errLog } from '../../../ui/src/log';
 import XEUtils from 'xe-utils';
 const { getI18n, getIcon, renderEmptyElement } = VxeUI;
-function updateDropHint(_vm, evnt) {
-    const { $refs } = _vm;
-    const dragHintEl = $refs.dragHintElemRef;
-    const bodyEl = $refs.bodyElemRef;
-    if (!bodyEl) {
+function showDropTip(_vm, evnt, optEl, showLine, dragPos) {
+    const { prevDragToChild } = _vm;
+    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 = VxeUI.getComponent('VxeButton');
     const props = _vm;
@@ -27,9 +88,12 @@ const renderSimplePanel = (h, _vm) => {
     const { customStore } = props;
     const { isCustomStatus, customColumnList } = reactData;
     const customOpts = $xeTable.computeCustomOpts;
+    const { immediate } = customOpts;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
     const { maxHeight } = customStore;
     const { checkMethod, visibleMethod, allowVisible, allowSort, allowFixed, trigger, placement } = customOpts;
     const isMaxFixedColumn = $xeTable.computeIsMaxFixedColumn;
+    const { isCrossDrag } = columnDragOpts;
     const slots = customOpts.slots || {};
     const headerSlot = slots.header;
     const topSlot = slots.top;
@@ -40,7 +104,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;
@@ -101,45 +164,49 @@ const renderSimplePanel = (h, _vm) => {
                         })
                     ])
                     : renderEmptyElement($xeTable),
-                allowSort && column.level === 1
-                    ? h('div', {
-                        class: 'vxe-table-custom--sort-option'
-                    }, [
-                        h('span', {
-                            class: ['vxe-table-custom--sort-btn', {
-                                    'is--disabled': isDisabled || isHidden
-                                }],
-                            attrs: {
-                                title: getI18n('vxe.custom.setting.sortHelpTip')
-                            },
-                            on: isDisabled || isHidden
-                                ? {}
-                                : {
-                                    mousedown: _vm.sortMousedownEvent,
-                                    mouseup: _vm.sortMouseupEvent
-                                }
+                h('div', {
+                    class: 'vxe-table-custom--name-option'
+                }, [
+                    allowSort && ((isCrossDrag ? immediate : false) || column.level === 1)
+                        ? h('div', {
+                            class: 'vxe-table-custom--sort-option'
                         }, [
-                            h('i', {
-                                class: getIcon().TABLE_CUSTOM_SORT
-                            })
+                            h('span', {
+                                class: ['vxe-table-custom--sort-btn', {
+                                        'is--disabled': isDisabled || isHidden || column.renderFixed
+                                    }],
+                                attrs: {
+                                    title: getI18n('vxe.custom.setting.sortHelpTip')
+                                },
+                                on: isDisabled || isHidden || column.renderFixed
+                                    ? {}
+                                    : {
+                                        mousedown: _vm.sortMousedownEvent,
+                                        mouseup: _vm.sortMouseupEvent
+                                    }
+                            }, [
+                                h('i', {
+                                    class: getIcon().TABLE_CUSTOM_SORT
+                                })
+                            ])
                         ])
-                    ])
-                    : renderEmptyElement($xeTable),
-                column.type === 'html'
-                    ? h('div', {
-                        key: '1',
-                        class: 'vxe-table-custom--checkbox-label',
-                        domProps: {
-                            innerHTML: colTitle
-                        }
-                    })
-                    : h('div', {
-                        key: '0',
-                        class: 'vxe-table-custom--checkbox-label',
-                        attrs: {
-                            title: colTitle
-                        }
-                    }, colTitle),
+                        : renderEmptyElement($xeTable),
+                    column.type === 'html'
+                        ? h('div', {
+                            key: '1',
+                            class: 'vxe-table-custom--checkbox-label',
+                            domProps: {
+                                innerHTML: colTitle
+                            }
+                        })
+                        : h('div', {
+                            key: '0',
+                            class: 'vxe-table-custom--checkbox-label',
+                            attrs: {
+                                title: colTitle
+                            }
+                        }, colTitle)
+                ]),
                 !parent && allowFixed
                     ? h('div', {
                         class: 'vxe-table-custom--fixed-option'
@@ -252,10 +319,7 @@ const renderSimplePanel = (h, _vm) => {
                         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() : '']))
+                renderDragTip(h, _vm)
             ]),
             customOpts.showFooter
                 ? h('div', {
@@ -276,7 +340,7 @@ const renderSimplePanel = (h, _vm) => {
                                     click: _vm.resetCustomEvent
                                 }
                             }),
-                            customOpts.immediate
+                            immediate
                                 ? h(VxeUIButtonComponent, {
                                     props: {
                                         mode: 'text',
@@ -295,7 +359,7 @@ const renderSimplePanel = (h, _vm) => {
                                         click: _vm.cancelCustomEvent
                                     }
                                 }),
-                            customOpts.immediate
+                            immediate
                                 ? renderEmptyElement($xeTable)
                                 : h(VxeUIButtonComponent, {
                                     props: {
@@ -318,7 +382,6 @@ const renderPopupPanel = (h, _vm) => {
     const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
     const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
     const VxeUINumberInputComponent = VxeUI.getComponent('VxeInput');
-    const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
     const $xeTableCustomPanel = _vm;
     const props = _vm;
     const $xeTable = _vm.$xeTable;
@@ -328,6 +391,8 @@ const renderPopupPanel = (h, _vm) => {
     const { resizable: allResizable } = tableProps;
     const { isCustomStatus, customColumnList } = reactData;
     const customOpts = $xeTable.computeCustomOpts;
+    const { immediate } = customOpts;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
     const { mode, modalOptions, drawerOptions, allowVisible, allowSort, allowFixed, allowResizable, checkMethod, visibleMethod } = customOpts;
     const columnOpts = $xeTable.computeColumnOpts;
     const { maxFixedSize } = columnOpts;
@@ -336,6 +401,7 @@ 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;
@@ -345,7 +411,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,
@@ -422,50 +487,52 @@ const renderPopupPanel = (h, _vm) => {
                         ])
                     ])
                     : renderEmptyElement($xeTable),
-                allowSort
-                    ? h('td', {
-                        class: 'vxe-table-custom-popup--column-item col--sort'
-                    }, [
-                        column.level === 1
-                            ? h('span', {
-                                class: ['vxe-table-custom-popup--column-sort-btn', {
-                                        'is--disabled': isDisabled || isHidden
-                                    }],
-                                attrs: {
-                                    title: getI18n('vxe.custom.setting.sortHelpTip')
-                                },
-                                on: isDisabled || isHidden
-                                    ? {}
-                                    : {
-                                        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', {
-                            key: '1',
-                            class: 'vxe-table-custom-popup--name',
-                            domProps: {
-                                innerHTML: colTitle
-                            }
-                        })
-                        : h('div', {
-                            key: '0',
-                            class: 'vxe-table-custom-popup--name',
-                            attrs: {
-                                title: colTitle
-                            }
-                        }, colTitle)
+                    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 || column.renderFixed
+                                        }],
+                                    attrs: {
+                                        title: getI18n('vxe.custom.setting.sortHelpTip')
+                                    },
+                                    on: (isDisabled || isHidden || column.renderFixed
+                                        ? {}
+                                        : {
+                                            mousedown: _vm.sortMousedownEvent,
+                                            mouseup: _vm.sortMouseupEvent
+                                        })
+                                }, [
+                                    h('i', {
+                                        class: getIcon().TABLE_CUSTOM_SORT
+                                    })
+                                ])
+                                : h('div', {
+                                    class: 'vxe-table-custom-popup--column-sort-placeholder'
+                                }))
+                            : renderEmptyElement($xeTable),
+                        column.type === 'html'
+                            ? h('div', {
+                                key: '1',
+                                class: 'vxe-table-custom-popup--title',
+                                domProps: {
+                                    innerHTML: colTitle
+                                }
+                            })
+                            : h('div', {
+                                key: '0',
+                                class: 'vxe-table-custom-popup--title',
+                                attrs: {
+                                    title: colTitle
+                                }
+                            }, colTitle)
+                    ])
                 ]),
                 allowResizable
                     ? h('td', {
@@ -478,6 +545,7 @@ const renderPopupPanel = (h, _vm) => {
                                 ? h(VxeUINumberInputComponent, {
                                     props: {
                                         type: 'integer',
+                                        immediate: false,
                                         disabled: isDisabled || isHidden,
                                         value: column.renderResizeWidth,
                                         min: customMinWidth || undefined,
@@ -486,6 +554,9 @@ const renderPopupPanel = (h, _vm) => {
                                     on: {
                                         modelValue(value) {
                                             column.renderResizeWidth = Math.max(0, Number(value));
+                                        },
+                                        change() {
+                                            _vm.changeColumnWidth(column);
                                         }
                                     }
                                 })
@@ -512,7 +583,7 @@ const renderPopupPanel = (h, _vm) => {
                                 },
                                 on: {
                                     input(value) {
-                                        column.renderFixed = value;
+                                        _vm.changeFixedOption(column, value);
                                     }
                                 }
                             })
@@ -545,11 +616,6 @@ const renderPopupPanel = (h, _vm) => {
                                     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'
                             }),
@@ -589,29 +655,6 @@ const renderPopupPanel = (h, _vm) => {
                                         ])
                                     ])
                                     : 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'))
@@ -635,10 +678,7 @@ const renderPopupPanel = (h, _vm) => {
                         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() : '']))
+                renderDragTip(h, _vm)
             ]);
         },
         footer: () => {
@@ -657,23 +697,34 @@ const renderPopupPanel = (h, _vm) => {
                         click: _vm.resetCustomEvent
                     }
                 }),
-                h(VxeUIButtonComponent, {
-                    props: {
-                        content: customOpts.resetButtonText || getI18n('vxe.custom.cstmCancel')
-                    },
-                    on: {
-                        click: _vm.cancelCustomEvent
-                    }
-                }),
-                h(VxeUIButtonComponent, {
-                    props: {
-                        status: 'primary',
-                        content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
-                    },
-                    on: {
-                        click: _vm.confirmCustomEvent
-                    }
-                })
+                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
+                        }
+                    }),
+                immediate
+                    ? renderEmptyElement($xeTable)
+                    : h(VxeUIButtonComponent, {
+                        props: {
+                            status: 'primary',
+                            content: customOpts.confirmButtonText || getI18n('vxe.custom.cstmConfirm')
+                        },
+                        on: {
+                            click: _vm.confirmCustomEvent
+                        }
+                    })
             ]);
         }
     };
@@ -754,7 +805,9 @@ export default {
     },
     data() {
         return {
-            dragColumn: null
+            prevDragCol: undefined,
+            prevDragToChild: false,
+            prevDragPos: null
         };
     },
     computed: {},
@@ -764,7 +817,6 @@ export default {
             const VxeUIDrawerComponent = VxeUI.getComponent('VxeDrawer');
             const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
             const VxeUINumberInputComponent = VxeUI.getComponent('VxeNumberInput');
-            const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
             const VxeUIRadioGroupComponent = VxeUI.getComponent('VxeRadioGroup');
             this.$nextTick(() => {
                 const { $xetable } = this;
@@ -782,9 +834,6 @@ export default {
                 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']);
                 }
@@ -819,6 +868,8 @@ export default {
         },
         confirmCustomEvent({ $event }) {
             const $xeTable = this.$xeTable;
+            const reactData = $xeTable;
+            reactData.isCustomStatus = true;
             $xeTable.saveCustom();
             $xeTable.closeCustom();
             $xeTable.emitCustomEvent('confirm', $event);
@@ -886,8 +937,9 @@ export default {
             }
         },
         changeCheckboxOption(column) {
-            const { $xetable } = this;
-            const { customOpts } = $xetable;
+            const $xeTable = this.$xetable;
+            const reactData = $xeTable;
+            const { customOpts } = $xeTable.customOpts;
             const isChecked = !column.renderVisible;
             if (customOpts.immediate) {
                 XEUtils.eachTree([column], (item) => {
@@ -895,8 +947,9 @@ export default {
                     item.renderVisible = isChecked;
                     item.halfVisible = false;
                 });
-                $xetable.handleCustom();
-                $xetable.saveCustomStore('update:visible');
+                reactData.isCustomStatus = true;
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore('update:visible');
             }
             else {
                 XEUtils.eachTree([column], (item) => {
@@ -905,11 +958,27 @@ export 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.eachTree([column], col => {
@@ -925,8 +994,9 @@ export default {
                         });
                     }
                 }
-                $xetable.handleCustom();
-                $xetable.saveCustomStore('update:fixed');
+                reactData.isCustomStatus = true;
+                $xeTable.handleCustom();
+                $xeTable.saveCustomStore('update:fixed');
             }
             else {
                 if (column.renderFixed === colFixed) {
@@ -948,102 +1018,237 @@ export 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;
             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;
             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, prevDropTrEl } = this;
-            const { customColumnList, customOpts } = $xetable;
+            const $xeTable = this.$xetable;
+            const tableProps = $xeTable;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { dragCol, prevDragPos, prevDragCol, prevDragToChild } = this;
+            const { 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.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.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 = {};
+                        XEUtils.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 (VxeUI.modal) {
+                                            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 (VxeUI.modal) {
+                                            VxeUI.modal.message({
+                                                status: 'error',
+                                                content: getI18n('vxe.error.treeDragChild')
+                                            });
+                                        }
+                                        return;
+                                    }
+                                }
+                            }
+                            else {
+                                // 根到根
+                            }
+                            const oldewMatchRest = XEUtils.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.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.eachTree(collectColumn, (column, index, items, path, parent) => {
+                                if (!parent) {
+                                    const sortIndex = index + 1;
+                                    column.renderSortNumber = sortIndex;
+                                }
+                            });
+                        }
+                        else {
+                            oafIndex = XEUtils.findIndexOf(customColumnList, item => item.id === oldColumn.id);
+                            customColumnList.splice(oafIndex, 1);
+                            nafIndex = XEUtils.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;
+            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) {
-                XEUtils.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, prevDropTrEl } = 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 $xeTable = this.$xetable;
+            const { dragCol } = this;
+            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) {
+                    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);
         }
     }
 };