vxe-table 4.8.0 → 4.8.2

package/es/table/src/table.js

@@ -248,6 +248,9 @@ export default defineComponent({
                 isFooter: false
             },
             scrollVMLoading: false,
+            isDragRowMove: false,
+            dragRow: null,
+            dragTipText: '',
             _isResize: false,
             _isLoading: false
         });
@@ -322,6 +325,7 @@ export default defineComponent({
             columnStatusMaps: {},
             // 行选取状态
             rowStatusMaps: {},
+            // prevDragRow: null,
             inited: false,
             tooltipTimeout: null,
             initStatus: false,
@@ -349,6 +353,7 @@ export default defineComponent({
         const refRightContainer = ref();
         const refCellResizeBar = ref();
         const refEmptyPlaceholder = ref();
+        const refRowDragTipElem = ref();
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
         const refScrollXHandleElem = ref();
@@ -393,6 +398,9 @@ export default defineComponent({
         const computeRowOpts = computed(() => {
             return Object.assign({}, getConfig().table.rowConfig, props.rowConfig);
         });
+        const computeDragOpts = computed(() => {
+            return Object.assign({}, getConfig().table.dragConfig, props.dragConfig);
+        });
         const computeResizeOpts = computed(() => {
             return Object.assign({}, getConfig().table.resizeConfig, props.resizeConfig);
         });
@@ -604,6 +612,7 @@ export default defineComponent({
             computeColumnOpts,
             computeCellOpts,
             computeRowOpts,
+            computeDragOpts,
             computeResizeOpts,
             computeResizableOpts,
             computeSeqOpts,
@@ -2751,7 +2760,7 @@ export default defineComponent({
         const handleCheckAllEvent = (evnt, value) => {
             handleCheckedAllCheckboxRow(value);
             if (evnt) {
-                tableMethods.dispatchEvent('checkbox-all', {
+                dispatchEvent('checkbox-all', {
                     records: tableMethods.getCheckboxRecords(),
                     reserves: tableMethods.getCheckboxReserveRecords(),
                     indeterminates: tableMethods.getCheckboxIndeterminateRecords(),
@@ -2809,22 +2818,28 @@ export default defineComponent({
         const debounceScrollYData = XEUtils.debounce(function () {
             loadScrollYData();
         }, 20, { leading: false, trailing: true });
-        const scrollXEvent = (evnt) => {
-            const wrapperEl = evnt.currentTarget;
+        const handleSyncScrollX = (scrollLeft) => {
             const tableHeader = refTableHeader.value;
             const tableBody = refTableBody.value;
             const tableFooter = refTableFooter.value;
             const bodyElem = tableBody.$el;
             const headerElem = tableHeader ? tableHeader.$el : null;
             const footerElem = tableFooter ? tableFooter.$el : null;
+            setScrollLeft(bodyElem, scrollLeft);
+            setScrollLeft(headerElem, scrollLeft);
+            setScrollLeft(footerElem, scrollLeft);
+            setScrollLeft(bodyElem, scrollLeft);
+            setScrollLeft(headerElem, scrollLeft);
+            setScrollLeft(footerElem, scrollLeft);
+        };
+        const scrollXEvent = (evnt) => {
+            const wrapperEl = evnt.currentTarget;
             const { scrollTop, scrollLeft } = wrapperEl;
             const isRollX = true;
             const isRollY = false;
             internalData.lastScrollLeft = scrollLeft;
             reactData.lastScrollTime = Date.now();
-            setScrollLeft(bodyElem, scrollLeft);
-            setScrollLeft(headerElem, scrollLeft);
-            setScrollLeft(footerElem, scrollLeft);
+            handleSyncScrollX(scrollLeft);
             $xeTable.triggerScrollXEvent(evnt);
             $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
                 type: 'table',
@@ -2836,22 +2851,25 @@ export default defineComponent({
         const debounceScrollYCalculate = XEUtils.debounce(function () {
             tablePrivateMethods.updateScrollYSpace();
         }, 1000, { leading: false, trailing: true });
-        const scrollYEvent = (evnt) => {
-            const wrapperEl = evnt.currentTarget;
+        const handleSyncScrollY = (scrollTop) => {
             const tableBody = refTableBody.value;
             const leftBody = refTableLeftBody.value;
             const rightBody = refTableRightBody.value;
             const bodyElem = tableBody.$el;
             const leftElem = leftBody ? leftBody.$el : null;
             const rightElem = rightBody ? rightBody.$el : null;
+            setScrollTop(bodyElem, scrollTop);
+            setScrollTop(leftElem, scrollTop);
+            setScrollTop(rightElem, scrollTop);
+        };
+        const scrollYEvent = (evnt) => {
+            const wrapperEl = evnt.currentTarget;
             const { scrollTop, scrollLeft } = wrapperEl;
             const isRollX = false;
             const isRollY = true;
             internalData.lastScrollTop = scrollTop;
             reactData.lastScrollTime = Date.now();
-            setScrollTop(bodyElem, scrollTop);
-            setScrollTop(leftElem, scrollTop);
-            setScrollTop(rightElem, scrollTop);
+            handleSyncScrollY(scrollTop);
             $xeTable.triggerScrollYEvent(evnt);
             $xeTable.handleScrollEvent(evnt, isRollY, isRollX, {
                 type: 'table',
@@ -2861,10 +2879,11 @@ export default defineComponent({
             });
         };
         let keyCtxTimeout;
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid }, params));
+        };
         tableMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid }, params));
-            },
+            dispatchEvent,
             /**
              * 重置表格的一切数据状态
              */
@@ -4209,7 +4228,7 @@ export default defineComponent({
                     visible: false
                 });
                 if (visible) {
-                    $xeTable.dispatchEvent('filter-visible', { column, property: column.field, field: column.field, filterList: $xeTable.getCheckedFilters(), visible: false }, null);
+                    dispatchEvent('filter-visible', { column, property: column.field, field: column.field, filterList: $xeTable.getCheckedFilters(), visible: false }, null);
                 }
                 return nextTick();
             },
@@ -5031,7 +5050,7 @@ export default defineComponent({
                                 tablePrivateMethods.preventEvent(evnt, 'event.clearAreas', {}, () => {
                                     $xeTable.clearCellAreas();
                                     $xeTable.clearCopyCellArea();
-                                    $xeTable.dispatchEvent('clear-cell-area-selection', { cellAreas }, evnt);
+                                    dispatchEvent('clear-cell-area-selection', { cellAreas }, evnt);
                                 });
                             }
                         }
@@ -5082,7 +5101,7 @@ export default defineComponent({
             const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
             if (isEsc) {
                 tablePrivateMethods.preventEvent(evnt, 'event.keydown', null, () => {
-                    tableMethods.dispatchEvent('keydown-start', {}, evnt);
+                    dispatchEvent('keydown-start', {}, evnt);
                     if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardEvent) {
                         $xeTable.handleKeyboardEvent(evnt);
                     }
@@ -5105,8 +5124,8 @@ export default defineComponent({
                             }
                         }
                     }
-                    tableMethods.dispatchEvent('keydown', {}, evnt);
-                    tableMethods.dispatchEvent('keydown-end', {}, evnt);
+                    dispatchEvent('keydown', {}, evnt);
+                    dispatchEvent('keydown-end', {}, evnt);
                 });
             }
         };
@@ -5304,7 +5323,7 @@ export default defineComponent({
                                 }
                                 // 如果按下 del 键，更新表尾数据
                                 tableMethods.updateFooter();
-                                $xeTable.dispatchEvent('cell-delete-value', params, evnt);
+                                dispatchEvent('cell-delete-value', params, evnt);
                             }
                         }
                     }
@@ -5330,7 +5349,7 @@ export default defineComponent({
                                         setCellValue(selected.row, selected.column, null);
                                         $xeTable.handleEdit(selected.args, evnt);
                                     }
-                                    $xeTable.dispatchEvent('cell-backspace-value', params, evnt);
+                                    dispatchEvent('cell-backspace-value', params, evnt);
                                 }
                             }
                         }
@@ -5380,7 +5399,7 @@ export default defineComponent({
                             }
                         }
                     }
-                    tableMethods.dispatchEvent('keydown', {}, evnt);
+                    dispatchEvent('keydown', {}, evnt);
                 });
             }
         };
@@ -5397,7 +5416,7 @@ export default defineComponent({
                         $xeTable.handlePasteCellAreaEvent(evnt);
                     }
                 }
-                tableMethods.dispatchEvent('paste', {}, evnt);
+                dispatchEvent('paste', {}, evnt);
             }
         };
         const handleGlobalCopyEvent = (evnt) => {
@@ -5413,7 +5432,7 @@ export default defineComponent({
                         $xeTable.handleCopyCellAreaEvent(evnt);
                     }
                 }
-                tableMethods.dispatchEvent('copy', {}, evnt);
+                dispatchEvent('copy', {}, evnt);
             }
         };
         const handleGlobalCutEvent = (evnt) => {
@@ -5429,7 +5448,7 @@ export default defineComponent({
                         $xeTable.handleCutCellAreaEvent(evnt);
                     }
                 }
-                tableMethods.dispatchEvent('cut', {}, evnt);
+                dispatchEvent('cut', {}, evnt);
             }
         };
         const handleGlobalResizeEvent = () => {
@@ -5455,6 +5474,50 @@ export default defineComponent({
                 }
             }
         };
+        const clearRowDropOrigin = () => {
+            const el = refElem.value;
+            if (el) {
+                const clss = 'row--drag-origin';
+                XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+                    elem.draggable = false;
+                    removeClass(elem, clss);
+                });
+            }
+        };
+        const clearRowDropTarget = () => {
+            const el = refElem.value;
+            if (el) {
+                const clss = 'row--drag-active-target';
+                XEUtils.arrayEach(el.querySelectorAll(`.${clss}`), (elem) => {
+                    removeClass(elem, clss);
+                });
+            }
+        };
+        const showRowDropTip = (evnt) => {
+            const rdTipEl = refRowDragTipElem.value;
+            if (!rdTipEl) {
+                return;
+            }
+            const el = refElem.value;
+            if (!el) {
+                return;
+            }
+            if (rdTipEl) {
+                const wrapperRect = el.getBoundingClientRect();
+                rdTipEl.style.display = 'block';
+                rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
+                rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
+            }
+        };
+        const hideRowDropTip = () => {
+            const rdTipEl = refRowDragTipElem.value;
+            if (rdTipEl) {
+                rdTipEl.style.display = '';
+            }
+        };
+        const updateRowDropTipContent = (tdEl) => {
+            reactData.dragTipText = tdEl.textContent || '';
+        };
         /**
          * 处理显示 tooltip
          * @param {Event} evnt 事件
@@ -6226,13 +6289,13 @@ export default defineComponent({
                 if (sortOpts.trigger === 'cell' && !(triggerResizable || triggerSort || triggerFilter)) {
                     tablePrivateMethods.triggerSortEvent(evnt, column, getNextSortOrder(column));
                 }
-                tableMethods.dispatchEvent('header-cell-click', Object.assign({ triggerResizable, triggerSort, triggerFilter, cell }, params), evnt);
+                dispatchEvent('header-cell-click', Object.assign({ triggerResizable, triggerSort, triggerFilter, cell }, params), evnt);
                 if (columnOpts.isCurrent || props.highlightCurrentColumn) {
                     tablePrivateMethods.triggerCurrentColumnEvent(evnt, params);
                 }
             },
             triggerHeaderCellDblclickEvent(evnt, params) {
-                tableMethods.dispatchEvent('header-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, params), evnt);
+                dispatchEvent('header-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, params), evnt);
             },
             /**
              * 列点击事件
@@ -6313,7 +6376,7 @@ export default defineComponent({
                         }
                     }
                 }
-                tableMethods.dispatchEvent('cell-click', params, evnt);
+                dispatchEvent('cell-click', params, evnt);
             },
             /**
              * 列双击点击事件
@@ -6344,7 +6407,7 @@ export default defineComponent({
                         }
                     }
                 }
-                tableMethods.dispatchEvent('cell-dblclick', params, evnt);
+                dispatchEvent('cell-dblclick', params, evnt);
             },
             handleToggleCheckRowEvent(evnt, params) {
                 const { selectCheckboxMaps } = reactData;
@@ -6388,7 +6451,7 @@ export default defineComponent({
                             tableMethods.setAllCheckboxRow(false);
                             const rangeRows = _rowIndex < _firstRowIndex ? afterFullData.slice(_rowIndex, _firstRowIndex + 1) : afterFullData.slice(_firstRowIndex, _rowIndex + 1);
                             handleCheckedCheckboxRow(rangeRows, true, false);
-                            tableMethods.dispatchEvent('checkbox-range-select', Object.assign({ rangeRecords: rangeRows }, params), evnt);
+                            dispatchEvent('checkbox-range-select', Object.assign({ rangeRecords: rangeRows }, params), evnt);
                             return;
                         }
                     }
@@ -6396,7 +6459,7 @@ export default defineComponent({
                 if (!checkMethod || checkMethod({ row })) {
                     tablePrivateMethods.handleSelectRow(params, value);
                     tablePrivateMethods.checkSelectionStatus();
-                    tableMethods.dispatchEvent('checkbox-change', Object.assign({
+                    dispatchEvent('checkbox-change', Object.assign({
                         records: tableMethods.getCheckboxRecords(),
                         reserves: tableMethods.getCheckboxReserveRecords(),
                         indeterminates: tableMethods.getCheckboxIndeterminateRecords(),
@@ -6443,7 +6506,7 @@ export default defineComponent({
                     }
                 }
                 if (isChange) {
-                    tableMethods.dispatchEvent('radio-change', Object.assign({ oldValue, newValue }, params), evnt);
+                    dispatchEvent('radio-change', Object.assign({ oldValue, newValue }, params), evnt);
                 }
             },
             triggerCurrentColumnEvent(evnt, params) {
@@ -6463,7 +6526,7 @@ export default defineComponent({
                 if (!currentMethod || currentMethod({ row: newValue })) {
                     tableMethods.setCurrentRow(newValue);
                     if (isChange) {
-                        tableMethods.dispatchEvent('current-change', Object.assign({ oldValue, newValue }, params), evnt);
+                        dispatchEvent('current-change', Object.assign({ oldValue, newValue }, params), evnt);
                     }
                 }
             },
@@ -6485,7 +6548,7 @@ export default defineComponent({
                     const columnIndex = tableMethods.getColumnIndex(column);
                     const $columnIndex = tableMethods.getVMColumnIndex(column);
                     tableMethods.setRowExpand(row, expanded);
-                    tableMethods.dispatchEvent('toggle-row-expand', {
+                    dispatchEvent('toggle-row-expand', {
                         expanded,
                         column,
                         columnIndex,
@@ -6514,7 +6577,7 @@ export default defineComponent({
                     const columnIndex = tableMethods.getColumnIndex(column);
                     const $columnIndex = tableMethods.getVMColumnIndex(column);
                     tableMethods.setTreeExpand(row, expanded);
-                    tableMethods.dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt);
+                    dispatchEvent('toggle-tree-expand', { expanded, column, columnIndex, $columnIndex, row }, evnt);
                 }
             },
             /**
@@ -6536,9 +6599,137 @@ export default defineComponent({
                     if (mouseConfig && mouseOpts.area && $xeTable.handleSortEvent) {
                         $xeTable.handleSortEvent(evnt, params);
                     }
-                    tableMethods.dispatchEvent('sort-change', params, evnt);
+                    dispatchEvent('sort-change', params, evnt);
+                }
+            },
+            handleRowDragDragstartEvent(evnt) {
+                const img = new Image();
+                if (evnt.dataTransfer) {
+                    evnt.dataTransfer.setDragImage(img, 0, 0);
                 }
             },
+            handleRowDragDragendEvent(evnt) {
+                const { treeConfig } = props;
+                const dragOpts = computeDragOpts.value;
+                const { dragEndMethod } = dragOpts;
+                const treeOpts = computeTreeOpts.value;
+                const { transform } = treeOpts;
+                const { dragRow } = reactData;
+                const { afterFullData, tableFullData, prevDragRow, prevDragPos } = internalData;
+                if (prevDragRow && dragRow) {
+                    // 判断是否有拖动
+                    if (prevDragRow !== dragRow) {
+                        Promise.resolve(dragEndMethod
+                            ? dragEndMethod({
+                                oldRow: dragRow,
+                                newRow: prevDragRow
+                            })
+                            : true).then((status) => {
+                            if (!status) {
+                                return;
+                            }
+                            const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+                            // 移出源位置
+                            const oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
+                            const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
+                            afterFullData.splice(oafIndex, 1);
+                            tableFullData.splice(otfIndex, 1);
+                            // 插新位置
+                            const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
+                            const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
+                            const nafIndex = pafIndex + dragOffsetIndex;
+                            const ntfIndex = ptfIndex + dragOffsetIndex;
+                            afterFullData.splice(nafIndex, 0, dragRow);
+                            tableFullData.splice(ntfIndex, 0, dragRow);
+                            reactData.isDragRowMove = true;
+                            $xeTable.cacheRowMap();
+                            $xeTable.updateScrollYStatus();
+                            $xeTable.handleTableData(treeConfig && transform);
+                            if (!(treeConfig && transform)) {
+                                $xeTable.updateAfterDataIndex();
+                            }
+                            $xeTable.updateFooter();
+                            $xeTable.checkSelectionStatus();
+                            if (reactData.scrollYLoad) {
+                                $xeTable.updateScrollYSpace();
+                            }
+                            nextTick().then(() => {
+                                $xeTable.updateCellAreas();
+                                return $xeTable.recalculate();
+                            });
+                            dispatchEvent('row-dragend', {
+                                oldRow: dragRow,
+                                newRow: prevDragRow,
+                                _index: {
+                                    newIndex: nafIndex,
+                                    oldIndex: oafIndex
+                                }
+                            }, evnt);
+                        }).catch(() => {
+                        });
+                    }
+                }
+                hideRowDropTip();
+                clearRowDropOrigin();
+                clearRowDropTarget();
+                reactData.dragRow = null;
+                setTimeout(() => {
+                    reactData.isDragRowMove = false;
+                }, 500);
+            },
+            handleRowDragDragoverEvent(evnt) {
+                const trEl = evnt.currentTarget;
+                const rowid = trEl.getAttribute('rowid');
+                const row = $xeTable.getRowById(rowid);
+                clearRowDropTarget();
+                if (row) {
+                    evnt.preventDefault();
+                    evnt.preventDefault();
+                    const { dragRow } = reactData;
+                    const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
+                    const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
+                    addClass(trEl, 'row--drag-active-target');
+                    trEl.setAttribute('drag-pos', dragPos);
+                    internalData.prevDragRow = row;
+                    internalData.prevDragPos = dragPos;
+                    dispatchEvent('row-dragover', {
+                        oldRow: dragRow,
+                        targetRow: row,
+                        dragPos
+                    }, evnt);
+                }
+                showRowDropTip(evnt);
+            },
+            handleCellDragMousedownEvent(evnt, params) {
+                var _a;
+                evnt.stopPropagation();
+                const dragOpts = computeDragOpts.value;
+                const { dragStartMethod } = dragOpts;
+                const { row } = params;
+                const dragEl = evnt.currentTarget;
+                const tdEl = (_a = dragEl.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode;
+                const trEl = tdEl.parentNode;
+                reactData.isDragRowMove = false;
+                clearRowDropOrigin();
+                if (dragStartMethod && !dragStartMethod(params)) {
+                    trEl.draggable = false;
+                    reactData.dragRow = null;
+                    hideRowDropTip();
+                    return;
+                }
+                reactData.dragRow = row;
+                trEl.draggable = true;
+                addClass(trEl, 'row--drag-origin');
+                showRowDropTip(evnt);
+                updateRowDropTipContent(tdEl);
+                dispatchEvent('row-dragstart', params, evnt);
+            },
+            handleCellDragMouseupEvent() {
+                clearRowDropOrigin();
+                hideRowDropTip();
+                reactData.dragRow = null;
+                reactData.isDragRowMove = false;
+            },
             /**
              * 横向 X 可视渲染事件处理
              */
@@ -6568,10 +6759,11 @@ export default defineComponent({
                 const bodyWidth = bodyElem ? bodyElem.clientWidth : 0;
                 const scrollHeight = bodyElem ? bodyElem.scrollHeight : 0;
                 const scrollWidth = bodyElem ? bodyElem.scrollWidth : 0;
-                $xeTable.dispatchEvent('scroll', Object.assign({ bodyHeight,
+                const evntParams = Object.assign({ bodyHeight,
                     bodyWidth,
                     scrollHeight,
-                    scrollWidth, isX: isRollX, isY: isRollY }, params), evnt);
+                    scrollWidth, isX: isRollX, isY: isRollY }, params);
+                dispatchEvent('scroll', evntParams, evnt);
             },
             /**
              * 纵向 Y 可视渲染事件处理
@@ -6717,14 +6909,14 @@ export default defineComponent({
             },
             updateScrollXData() {
                 // reactData.tableColumn = []
-                nextTick(() => {
+                return nextTick().then(() => {
                     handleTableColumn();
                     tablePrivateMethods.updateScrollXSpace();
                 });
             },
             updateScrollYData() {
                 // reactData.tableData = []
-                nextTick(() => {
+                return nextTick().then(() => {
                     tablePrivateMethods.handleTableData();
                     calcCellHeight();
                     tablePrivateMethods.updateScrollYSpace();
@@ -7124,6 +7316,15 @@ export default defineComponent({
                         ref: refTableMenu
                     })
                     : createCommentVNode(),
+                /**
+                 * 拖拽提示
+                 */
+                rowOpts.drag
+                    ? h('div', {
+                        ref: refRowDragTipElem,
+                        class: 'vxe-table--row-drag-hint'
+                    }, getI18n('vxe.table.dragTip', [reactData.dragTipText]))
+                    : createCommentVNode(),
                 /**
                  * 提示相关
                  */

package/es/table/style.css

@@ -712,6 +712,9 @@
   display: flex;
   flex-direction: row;
 }
+.vxe-table-custom--option.active--drag-origin {
+  opacity: 0.5;
+}
 .vxe-table-custom--option.active--drag-target[drag-pos=top]::after {
   display: block;
   top: -2px;
@@ -944,6 +947,9 @@
   padding-right: 0.4em;
 }
 .vxe-table-custom--sort-btn:not(.is--disabled) {
+  cursor: grab;
+}
+.vxe-table-custom--sort-btn:not(.is--disabled):active {
   cursor: grabbing;
 }
 .vxe-table-custom--sort-btn:not(.is--disabled):hover {
@@ -1024,7 +1030,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  padding: 0.6em 1em 0.6em 1.8em;
+  padding: 0.6em 1em 0.6em 1.6em;
   max-width: 300px;
   border-radius: var(--vxe-ui-border-radius);
   overflow: hidden;
@@ -1087,6 +1093,9 @@
   width: 100%;
 }
 
+.vxe-table-custom-popup--row.active--drag-origin .vxe-table-custom-popup--column-item {
+  opacity: 0.5;
+}
 .vxe-table-custom-popup--row.active--drag-target[drag-pos=top] .vxe-table-custom-popup--column-item::after {
   display: block;
   top: -2px;
@@ -1108,7 +1117,7 @@
   position: absolute;
   left: -1px;
   width: calc(100% + 1px);
-  height: 3px;
+  height: 2px;
   background-color: var(--vxe-ui-font-primary-color);
   z-index: 12;
 }
@@ -2032,6 +2041,7 @@
   /*树形节点*/
   /*展开行*/
   /*设置列高度*/
+  /*拖拽行*/
   /*溢出列*/
   /*暂无数据*/
   /*校验不通过*/
@@ -2592,6 +2602,71 @@
   overflow: auto;
   outline: 0;
 }
+.vxe-table--render-default .vxe-cell--drag-handle {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-table--render-default .vxe-cell--drag-handle + span {
+  padding-left: 0.5em;
+}
+.vxe-table--render-default .vxe-cell--drag-handle:not(.is--disabled) {
+  cursor: grab;
+}
+.vxe-table--render-default .vxe-cell--drag-handle:not(.is--disabled):active {
+  cursor: grabbing;
+}
+.vxe-table--render-default .vxe-cell--drag-handle:not(.is--disabled):hover {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-table--render-default .vxe-cell--drag-handle.is--disabled {
+  color: var(--vxe-ui-input-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-origin > .vxe-body--column > .vxe-cell {
+  opacity: 0.5;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-active-target > .vxe-body--column::after {
+  display: none;
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--vxe-ui-font-primary-color);
+  z-index: 12;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-active-target[drag-pos=top] > .vxe-body--column::after {
+  display: block;
+  top: 0;
+}
+.vxe-table--render-default .vxe-body--row.row--drag-active-target[drag-pos=bottom] > .vxe-body--column::after {
+  display: block;
+  bottom: 0;
+}
+.vxe-table--render-default .vxe-body--row-list-move {
+  transition: transform 0.35s;
+}
+.vxe-table--render-default .vxe-table--row-drag-hint {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.6em 1em 0.6em 1.6em;
+  max-width: 50%;
+  min-width: 100px;
+  border-radius: var(--vxe-ui-border-radius);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+  background-color: var(--vxe-ui-layout-background-color);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  z-index: 33;
+}
 .vxe-table--render-default .vxe-header--column.col--ellipsis:not(.col--active) > .vxe-cell,
 .vxe-table--render-default .vxe-body--column.col--ellipsis:not(.col--active) > .vxe-cell,
 .vxe-table--render-default .vxe-footer--column.col--ellipsis:not(.col--active) > .vxe-cell {