update

components/apolloTable/component/DragSorted.tsx

@@ -15,6 +15,7 @@ const DragSorted = (props: any) => {
         columns,
         cachedFeAttr,
         position,
+        columnChsName,
     } = props;
     if (!canSorted || position === 'left' || position === 'right') {
         return <div className={s.sortedWrap}>{props.children}</div>;
@@ -100,7 +101,7 @@ const DragSorted = (props: any) => {
                 }
                 timerInterval.current = setInterval(() => {
                     onDragSortedMove(dir, step);
-                }, 350);
+                }, 150);
             } else {
                 // 需要停止，清除已有计时器
                 // eslint-disable-next-line no-lonely-if
@@ -147,8 +148,10 @@ const DragSorted = (props: any) => {
         }
         // 拖动回调
         const newColumns: any[] = [];
-        columns.map((item: any) => {
-            if (Number(dragColumnOrder) > Number(dropColumnOrder)) {
+        // 从右往左拖
+        if (Number(dragColumnOrder) > Number(dropColumnOrder)) {
+            // columns已排序
+            columns.map((item: any, i: number) => {
                 if (item.orderNo >= Number(dropColumnOrder) && item.orderNo <= Number(dragColumnOrder)) {
                     if (item.columnName === dragColumn) {
                         newColumns.push({
@@ -158,28 +161,34 @@ const DragSorted = (props: any) => {
                     } else {
                         newColumns.push({
                             ...item,
-                            orderNo: item.orderNo + 1,
+                            orderNo: columns[i + 1].orderNo,
                         });
                     }
                 } else {
                     newColumns.push(item);
                 }
-            } else {
+            });
+        } else {
+            // 从左往右拖
+            const index = columns.findIndex((item: any) => {
+                return item.columnName === dropColumn;
+            });
+            columns.map((item: any, i: number) => {
                 if (item.columnName === dragColumn) {
                     newColumns.push({
                         ...item,
-                        orderNo: Number(dropColumnOrder) - 1,
+                        orderNo: columns[index - 1].orderNo,
                     });
-                } else if (item.orderNo >= Number(dragColumnOrder) && item.orderNo <= Number(dropColumnOrder)) {
+                } else if (item.orderNo > Number(dragColumnOrder) && item.orderNo < Number(dropColumnOrder)) {
                     newColumns.push({
                         ...item,
-                        orderNo: item.orderNo - 1,
+                        orderNo: columns[i - 1].orderNo,
                     });
                 } else {
                     newColumns.push(item);
                 }
-            }
-        });
+            });
+        }
         if (cachedFeAttr) {
             const cachedCols = getCache({ tableId });
             if (cachedCols) {
@@ -219,6 +228,7 @@ const DragSorted = (props: any) => {
                 columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
                 // 影子div宽度=拖动列宽度
                 columnCopyDiv.style.width = `${targetRect.width}px`;
+                columnCopyDiv.innerText = columnChsName;
                 // 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
                 const detaX = curX - targetRect.x;
                 columnCopyDiv.setAttribute('data-deta-x', String(detaX));
@@ -237,7 +247,7 @@ const DragSorted = (props: any) => {
             // 阻止默认行为
             e.preventDefault();
         },
-        [columnName, orderNo],
+        [columnName, orderNo, onMouseMove, onMouseUp],
     );
 
     return (

components/apolloTable/component/Table.less

@@ -109,4 +109,6 @@
     background: rgba(0, 0, 0, 0.3);
     display: none;
     cursor: grab;
+    text-align: center;
+    padding-top: @paddingSmX;
 }

components/apolloTable/component/Table.tsx

@@ -274,6 +274,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             >
                 <DragSorted
                     columnName={columnName}
+                    columnChsName={columnChsName}
                     orderNo={orderNo}
                     canSorted={canSorted}
                     onDragSorted={onDragSorted}