stk-table-vue 0.6.8 → 0.6.10

package/src/StkTable/useKeyboardArrowScroll.ts

@@ -1,106 +1,106 @@
-import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
-import { StkTableColumn } from './types';
-import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
-
-/** 翻页按键 */
-enum ScrollCodes {
-    ArrowUp = 'ArrowUp',
-    ArrowRight = 'ArrowRight',
-    ArrowDown = 'ArrowDown',
-    ArrowLeft = 'ArrowLeft',
-    PageUp = 'PageUp',
-    PageDown = 'PageDown',
-}
-/** 所有翻页按键数组 */
-const ScrollCodesValues = Object.values(ScrollCodes);
-
-type Options<DT extends Record<string, any>> = {
-    props: any;
-    scrollTo: (y: number | null, x: number | null) => void;
-    virtualScroll: Ref<VirtualScrollStore>;
-    virtualScrollX: Ref<VirtualScrollXStore>;
-    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
-    virtual_on: ComputedRef<boolean>;
-};
-/**
- * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
- *
- * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
- */
-export function useKeyboardArrowScroll<DT extends Record<string, any>>(
-    targetElement: Ref<HTMLElement | undefined>,
-    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }: Options<DT>,
-) {
-    /** 检测鼠标是否悬浮在表格体上 */
-    let isMouseOver = false;
-    watch(virtual_on, val => {
-        if (!val) {
-            removeListeners();
-        } else {
-            addEventListeners();
-        }
-    });
-
-    onMounted(addEventListeners);
-
-    onBeforeUnmount(removeListeners);
-
-    function addEventListeners() {
-        window.addEventListener('keydown', handleKeydown);
-        targetElement.value?.addEventListener('mouseenter', handleMouseEnter);
-        targetElement.value?.addEventListener('mouseleave', handleMouseLeave);
-        targetElement.value?.addEventListener('mousedown', handleMouseDown);
-    }
-
-    function removeListeners() {
-        window.removeEventListener('keydown', handleKeydown);
-        targetElement.value?.removeEventListener('mouseenter', handleMouseEnter);
-        targetElement.value?.removeEventListener('mouseleave', handleMouseLeave);
-        targetElement.value?.removeEventListener('mousedown', handleMouseDown);
-    }
-
-    /** 键盘按下事件 */
-    function handleKeydown(e: KeyboardEvent) {
-        if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
-        if (!ScrollCodesValues.includes(e.code as any)) return;
-        if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
-        e.preventDefault(); // 不触发键盘默认的箭头事件
-
-        const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
-        const { scrollLeft } = virtualScrollX.value;
-        const { headless, headerRowHeight } = props;
-
-        // 这里不用virtualScroll 中的pageSize，因为我需要上一页的最后一条放在下一页的第一条
-        const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
-        /** 表体的page */
-        const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
-
-        if (e.code === ScrollCodes.ArrowUp) {
-            scrollTo(scrollTop - rowHeight, null);
-        } else if (e.code === ScrollCodes.ArrowRight) {
-            scrollTo(null, scrollLeft + rowHeight);
-        } else if (e.code === ScrollCodes.ArrowDown) {
-            scrollTo(scrollTop + rowHeight, null);
-        } else if (e.code === ScrollCodes.ArrowLeft) {
-            scrollTo(null, scrollLeft - rowHeight);
-        } else if (e.code === ScrollCodes.PageUp) {
-            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
-        } else if (e.code === ScrollCodes.PageDown) {
-            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
-        }
-    }
-
-    function handleMouseEnter() {
-        isMouseOver = true;
-    }
-    function handleMouseLeave() {
-        isMouseOver = false;
-    }
-    /**
-     * 兜底。
-     * 是否存在不触发mouseEnter的时候？
-     */
-    function handleMouseDown() {
-        if (!isMouseOver) isMouseOver = true;
-    }
-}
+import { ComputedRef, Ref, ShallowRef, onBeforeUnmount, onMounted, watch } from 'vue';
+import { StkTableColumn } from './types';
+import { VirtualScrollStore, VirtualScrollXStore } from './useVirtualScroll';
+
+/** 翻页按键 */
+enum ScrollCodes {
+    ArrowUp = 'ArrowUp',
+    ArrowRight = 'ArrowRight',
+    ArrowDown = 'ArrowDown',
+    ArrowLeft = 'ArrowLeft',
+    PageUp = 'PageUp',
+    PageDown = 'PageDown',
+}
+/** 所有翻页按键数组 */
+const ScrollCodesValues = Object.values(ScrollCodes);
+
+type Options<DT extends Record<string, any>> = {
+    props: any;
+    scrollTo: (y: number | null, x: number | null) => void;
+    virtualScroll: Ref<VirtualScrollStore>;
+    virtualScrollX: Ref<VirtualScrollXStore>;
+    tableHeaders: ShallowRef<StkTableColumn<DT>[][]>;
+    virtual_on: ComputedRef<boolean>;
+};
+/**
+ * 按下键盘箭头滚动。只有悬浮在表体上才能生效键盘。
+ *
+ * 在低版本浏览器中，虚拟滚动时，使用键盘滚动，等选中的行消失在视口外时，滚动会失效。
+ */
+export function useKeyboardArrowScroll<DT extends Record<string, any>>(
+    targetElement: Ref<HTMLElement | undefined>,
+    { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }: Options<DT>,
+) {
+    /** 检测鼠标是否悬浮在表格体上 */
+    let isMouseOver = false;
+    watch(virtual_on, val => {
+        if (!val) {
+            removeListeners();
+        } else {
+            addEventListeners();
+        }
+    });
+
+    onMounted(addEventListeners);
+
+    onBeforeUnmount(removeListeners);
+
+    function addEventListeners() {
+        window.addEventListener('keydown', handleKeydown);
+        targetElement.value?.addEventListener('mouseenter', handleMouseEnter);
+        targetElement.value?.addEventListener('mouseleave', handleMouseLeave);
+        targetElement.value?.addEventListener('mousedown', handleMouseDown);
+    }
+
+    function removeListeners() {
+        window.removeEventListener('keydown', handleKeydown);
+        targetElement.value?.removeEventListener('mouseenter', handleMouseEnter);
+        targetElement.value?.removeEventListener('mouseleave', handleMouseLeave);
+        targetElement.value?.removeEventListener('mousedown', handleMouseDown);
+    }
+
+    /** 键盘按下事件 */
+    function handleKeydown(e: KeyboardEvent) {
+        if (!virtual_on.value) return; // 非虚拟滚动使用浏览器默认滚动
+        if (!ScrollCodesValues.includes(e.code as any)) return;
+        if (!isMouseOver) return; // 不悬浮还是要触发键盘事件的
+        e.preventDefault(); // 不触发键盘默认的箭头事件
+
+        const { scrollTop, rowHeight, containerHeight } = virtualScroll.value;
+        const { scrollLeft } = virtualScrollX.value;
+        const { headless, headerRowHeight } = props;
+
+        // 这里不用virtualScroll 中的pageSize，因为我需要上一页的最后一条放在下一页的第一条
+        const headerHeight = headless ? 0 : tableHeaders.value.length * (headerRowHeight || rowHeight);
+        /** 表体的page */
+        const bodyPageSize = Math.floor((containerHeight - headerHeight) / rowHeight);
+
+        if (e.code === ScrollCodes.ArrowUp) {
+            scrollTo(scrollTop - rowHeight, null);
+        } else if (e.code === ScrollCodes.ArrowRight) {
+            scrollTo(null, scrollLeft + rowHeight);
+        } else if (e.code === ScrollCodes.ArrowDown) {
+            scrollTo(scrollTop + rowHeight, null);
+        } else if (e.code === ScrollCodes.ArrowLeft) {
+            scrollTo(null, scrollLeft - rowHeight);
+        } else if (e.code === ScrollCodes.PageUp) {
+            scrollTo(scrollTop - rowHeight * bodyPageSize + headerHeight, null);
+        } else if (e.code === ScrollCodes.PageDown) {
+            scrollTo(scrollTop + rowHeight * bodyPageSize - headerHeight, null);
+        }
+    }
+
+    function handleMouseEnter() {
+        isMouseOver = true;
+    }
+    function handleMouseLeave() {
+        isMouseOver = false;
+    }
+    /**
+     * 兜底。
+     * 是否存在不触发mouseEnter的时候？
+     */
+    function handleMouseDown() {
+        if (!isMouseOver) isMouseOver = true;
+    }
+}

package/src/StkTable/useThDrag.ts

@@ -1,102 +1,102 @@
-import { computed, ComputedRef } from 'vue';
-import { StkTableColumn, UniqKey } from './types';
-import { isEmptyValue } from './utils';
-
-type Params<T extends Record<string, any>> = {
-    props: any;
-    emits: any;
-    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
-};
-/**
- * 列顺序拖动
- * @returns
- */
-export function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>) {
-    const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
-
-    const dragConfig = computed(() => {
-        const headerDrag = props.headerDrag;
-        const draggable = headerDrag !== false; // true or object
-        return {
-            draggable,
-            mode: 'insert',
-            disabled: () => false,
-            ...headerDrag,
-        };
-    });
-
-    /** 开始拖动记录th位置 */
-    function onThDragStart(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-        const dragStartKey = th.dataset.colKey || '';
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.effectAllowed = 'move';
-            dt.setData('text/plain', dragStartKey);
-        }
-
-        emits('th-drag-start', dragStartKey);
-    }
-
-    function onThDragOver(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-
-        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
-        if (!isHeaderDraggable) return;
-
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.dropEffect = 'move';
-        }
-        e.preventDefault();
-    }
-
-    /** th拖动释放时 */
-    function onThDrop(e: DragEvent) {
-        const th = findParentTH(e);
-        if (!th) return;
-        const dragStartKey = e.dataTransfer?.getData('text');
-        if (dragStartKey !== th.dataset.colKey) {
-            handleColOrderChange(dragStartKey, th.dataset.colKey);
-        }
-        emits('th-drop', th.dataset.colKey);
-    }
-
-    /** 列拖动交换顺序 */
-    function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
-        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
-
-        if (dragConfig.value.mode !== 'none') {
-            const columns = [...props.columns];
-
-            const dragStartIndex = columns.findIndex(col => colKeyGen.value(col) === dragStartKey);
-            const dragEndIndex = columns.findIndex(col => colKeyGen.value(col) === dragEndKey);
-
-            if (dragStartIndex === -1 || dragEndIndex === -1) return;
-
-            const dragStartCol = columns[dragStartIndex];
-            // if mode is none, do nothing
-            if (dragConfig.value.mode === 'swap') {
-                columns[dragStartIndex] = columns[dragEndIndex];
-                columns[dragEndIndex] = dragStartCol;
-            } else {
-                // default is insert
-                columns.splice(dragStartIndex, 1);
-                columns.splice(dragEndIndex, 0, dragStartCol);
-            }
-            emits('update:columns', columns);
-        }
-
-        emits('col-order-change', dragStartKey, dragEndKey);
-    }
-
-    return {
-        onThDragStart,
-        onThDragOver,
-        onThDrop,
-        /** 是否可拖拽 */
-        isHeaderDraggable: (col: StkTableColumn<DT>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
-    };
-}
+import { computed, ComputedRef } from 'vue';
+import { StkTableColumn, UniqKey } from './types';
+import { isEmptyValue } from './utils';
+
+type Params<T extends Record<string, any>> = {
+    props: any;
+    emits: any;
+    colKeyGen: ComputedRef<(col: StkTableColumn<T>) => UniqKey>;
+};
+/**
+ * 列顺序拖动
+ * @returns
+ */
+export function useThDrag<DT extends Record<string, any>>({ props, emits, colKeyGen }: Params<DT>) {
+    const findParentTH = (e: DragEvent) => (e.target as HTMLElement).closest('th');
+
+    const dragConfig = computed(() => {
+        const headerDrag = props.headerDrag;
+        const draggable = headerDrag !== false; // true or object
+        return {
+            draggable,
+            mode: 'insert',
+            disabled: () => false,
+            ...headerDrag,
+        };
+    });
+
+    /** 开始拖动记录th位置 */
+    function onThDragStart(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+        const dragStartKey = th.dataset.colKey || '';
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.effectAllowed = 'move';
+            dt.setData('text/plain', dragStartKey);
+        }
+
+        emits('th-drag-start', dragStartKey);
+    }
+
+    function onThDragOver(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+
+        const isHeaderDraggable = th.getAttribute('draggable') === 'true';
+        if (!isHeaderDraggable) return;
+
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.dropEffect = 'move';
+        }
+        e.preventDefault();
+    }
+
+    /** th拖动释放时 */
+    function onThDrop(e: DragEvent) {
+        const th = findParentTH(e);
+        if (!th) return;
+        const dragStartKey = e.dataTransfer?.getData('text');
+        if (dragStartKey !== th.dataset.colKey) {
+            handleColOrderChange(dragStartKey, th.dataset.colKey);
+        }
+        emits('th-drop', th.dataset.colKey);
+    }
+
+    /** 列拖动交换顺序 */
+    function handleColOrderChange(dragStartKey: string | undefined, dragEndKey: string | undefined) {
+        if (isEmptyValue(dragStartKey) || isEmptyValue(dragEndKey)) return;
+
+        if (dragConfig.value.mode !== 'none') {
+            const columns: StkTableColumn<any>[] = props.columns.slice();
+
+            const dragStartIndex = columns.findIndex(col => colKeyGen.value(col) === dragStartKey);
+            const dragEndIndex = columns.findIndex(col => colKeyGen.value(col) === dragEndKey);
+
+            if (dragStartIndex === -1 || dragEndIndex === -1) return;
+
+            const dragStartCol = columns[dragStartIndex];
+            // if mode is none, do nothing
+            if (dragConfig.value.mode === 'swap') {
+                columns[dragStartIndex] = columns[dragEndIndex];
+                columns[dragEndIndex] = dragStartCol;
+            } else {
+                // default is insert
+                columns.splice(dragStartIndex, 1);
+                columns.splice(dragEndIndex, 0, dragStartCol);
+            }
+            emits('update:columns', columns);
+        }
+
+        emits('col-order-change', dragStartKey, dragEndKey);
+    }
+
+    return {
+        onThDragStart,
+        onThDragOver,
+        onThDrop,
+        /** 是否可拖拽 */
+        isHeaderDraggable: (col: StkTableColumn<DT>) => dragConfig.value.draggable && !dragConfig.value.disabled(col),
+    };
+}

package/src/StkTable/useTrDrag.ts

@@ -1,118 +1,118 @@
-import { computed, ShallowRef } from 'vue';
-import { DragRowConfig } from './types';
-
-type Params = {
-    props: any;
-    emits: any;
-    dataSourceCopy: ShallowRef<any[]>;
-};
-
-const TR_DRAGGING_CLASS = 'tr-dragging';
-const TR_DRAG_OVER_CLASS = 'tr-dragging-over';
-const DATA_TRANSFER_FORMAT = 'text/plain';
-
-/**
- * 拖拽行
- * TODO: 不在虚拟滚动的情况下，从上面拖拽到下面，跨页的时候，滚动条会自适应位置。没有顶上去
- */
-export function useTrDrag({ props, emits, dataSourceCopy }: Params) {
-    let trDragFlag = false;
-
-    const dragRowConfig = computed<DragRowConfig>(() => {
-        return { mode: 'insert', ...props.dragRowConfig };
-    });
-
-    function getClosestTr(e: DragEvent) {
-        const target = e.target as HTMLElement;
-        const tr = target?.closest('tr');
-        return tr;
-    }
-
-    function onTrDragStart(e: DragEvent, rowIndex: number) {
-        const tr = getClosestTr(e);
-        if (tr) {
-            const trRect = tr.getBoundingClientRect();
-            const x = e.clientX - (trRect.left ?? 0);
-            e.dataTransfer?.setDragImage(tr, x, trRect.height / 2);
-            tr.classList.add(TR_DRAGGING_CLASS);
-        }
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.effectAllowed = 'move';
-            dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
-        }
-        trDragFlag = true;
-    }
-
-    function onTrDragOver(e: DragEvent) {
-        if (!trDragFlag) return;
-        e.preventDefault(); // 阻止默认行为，否则不会触发 drop 事件
-
-        const dt = e.dataTransfer;
-        if (dt) {
-            dt.dropEffect = 'move';
-        }
-    }
-
-    let oldTr: HTMLElement | null = null;
-    function onTrDragEnter(e: DragEvent) {
-        if (!trDragFlag) return;
-        e.preventDefault();
-        const tr = getClosestTr(e);
-        if (oldTr && oldTr !== tr) {
-            // 两个tr不一样说明移动到了另一个tr中
-            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
-        }
-        if (tr) {
-            oldTr = tr;
-            tr.classList.add(TR_DRAG_OVER_CLASS);
-        }
-    }
-
-    function onTrDragEnd(e: DragEvent) {
-        if (!trDragFlag) return;
-        const tr = getClosestTr(e);
-        if (tr) {
-            tr.classList.remove(TR_DRAGGING_CLASS);
-        }
-        if (oldTr) {
-            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
-            oldTr = null;
-        }
-        trDragFlag = false;
-    }
-
-    function onTrDrop(e: DragEvent, rowIndex: number) {
-        if (!trDragFlag) return;
-        const dt = e.dataTransfer;
-        if (!dt) return;
-        const mode = dragRowConfig.value.mode;
-        const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
-        // dt.clearData(DATA_TRANSFER_FORMAT); // firefox not work
-        const endIndex = rowIndex;
-        if (sourceIndex === endIndex) return;
-
-        if (mode !== 'none') {
-            const dataSourceTemp = [...dataSourceCopy.value];
-            const sourceRow = dataSourceTemp[sourceIndex];
-            if (mode === 'swap') {
-                dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
-                dataSourceTemp[endIndex] = sourceRow;
-            } else {
-                dataSourceTemp.splice(sourceIndex, 1);
-                dataSourceTemp.splice(endIndex, 0, sourceRow);
-            }
-            dataSourceCopy.value = [...dataSourceTemp];
-        }
-        emits('row-order-change', sourceIndex, endIndex);
-    }
-
-    return {
-        dragRowConfig,
-        onTrDragStart,
-        onTrDragEnter,
-        onTrDragOver,
-        onTrDrop,
-        onTrDragEnd,
-    };
-}
+import { computed, ShallowRef } from 'vue';
+import { DragRowConfig } from './types';
+
+type Params = {
+    props: any;
+    emits: any;
+    dataSourceCopy: ShallowRef<any[]>;
+};
+
+const TR_DRAGGING_CLASS = 'tr-dragging';
+const TR_DRAG_OVER_CLASS = 'tr-dragging-over';
+const DATA_TRANSFER_FORMAT = 'text/plain';
+
+/**
+ * 拖拽行
+ * TODO: 不在虚拟滚动的情况下，从上面拖拽到下面，跨页的时候，滚动条会自适应位置。没有顶上去
+ */
+export function useTrDrag({ props, emits, dataSourceCopy }: Params) {
+    let trDragFlag = false;
+
+    const dragRowConfig = computed<DragRowConfig>(() => {
+        return { mode: 'insert', ...props.dragRowConfig };
+    });
+
+    function getClosestTr(e: DragEvent) {
+        const target = e.target as HTMLElement;
+        const tr = target?.closest('tr');
+        return tr;
+    }
+
+    function onTrDragStart(e: DragEvent, rowIndex: number) {
+        const tr = getClosestTr(e);
+        if (tr) {
+            const trRect = tr.getBoundingClientRect();
+            const x = e.clientX - (trRect.left ?? 0);
+            e.dataTransfer?.setDragImage(tr, x, trRect.height / 2);
+            tr.classList.add(TR_DRAGGING_CLASS);
+        }
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.effectAllowed = 'move';
+            dt.setData(DATA_TRANSFER_FORMAT, String(rowIndex));
+        }
+        trDragFlag = true;
+    }
+
+    function onTrDragOver(e: DragEvent) {
+        if (!trDragFlag) return;
+        e.preventDefault(); // 阻止默认行为，否则不会触发 drop 事件
+
+        const dt = e.dataTransfer;
+        if (dt) {
+            dt.dropEffect = 'move';
+        }
+    }
+
+    let oldTr: HTMLElement | null = null;
+    function onTrDragEnter(e: DragEvent) {
+        if (!trDragFlag) return;
+        e.preventDefault();
+        const tr = getClosestTr(e);
+        if (oldTr && oldTr !== tr) {
+            // 两个tr不一样说明移动到了另一个tr中
+            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+        }
+        if (tr) {
+            oldTr = tr;
+            tr.classList.add(TR_DRAG_OVER_CLASS);
+        }
+    }
+
+    function onTrDragEnd(e: DragEvent) {
+        if (!trDragFlag) return;
+        const tr = getClosestTr(e);
+        if (tr) {
+            tr.classList.remove(TR_DRAGGING_CLASS);
+        }
+        if (oldTr) {
+            oldTr.classList.remove(TR_DRAG_OVER_CLASS);
+            oldTr = null;
+        }
+        trDragFlag = false;
+    }
+
+    function onTrDrop(e: DragEvent, rowIndex: number) {
+        if (!trDragFlag) return;
+        const dt = e.dataTransfer;
+        if (!dt) return;
+        const mode = dragRowConfig.value.mode;
+        const sourceIndex = Number(dt.getData(DATA_TRANSFER_FORMAT));
+        // dt.clearData(DATA_TRANSFER_FORMAT); // firefox not work
+        const endIndex = rowIndex;
+        if (sourceIndex === endIndex) return;
+
+        if (mode !== 'none') {
+            const dataSourceTemp = dataSourceCopy.value.slice();
+            const sourceRow = dataSourceTemp[sourceIndex];
+            if (mode === 'swap') {
+                dataSourceTemp[sourceIndex] = dataSourceTemp[endIndex];
+                dataSourceTemp[endIndex] = sourceRow;
+            } else {
+                dataSourceTemp.splice(sourceIndex, 1);
+                dataSourceTemp.splice(endIndex, 0, sourceRow);
+            }
+            dataSourceCopy.value = dataSourceTemp;
+        }
+        emits('row-order-change', sourceIndex, endIndex);
+    }
+
+    return {
+        dragRowConfig,
+        onTrDragStart,
+        onTrDragEnter,
+        onTrDragOver,
+        onTrDrop,
+        onTrDragEnd,
+    };
+}