diff --git a/packages/amis-ui/src/locale/de-DE.ts b/packages/amis-ui/src/locale/de-DE.ts
index 68f9e152189..5501fcdca12 100644
--- a/packages/amis-ui/src/locale/de-DE.ts
+++ b/packages/amis-ui/src/locale/de-DE.ts
@@ -241,6 +241,7 @@ register('de-DE', {
   'Table.copyRow': 'Zeile kopieren',
   'Table.columnsVisibility':
     'Klicken, um die Sichtbarkeit der Spalten zu steuern',
+  'Table.columnsSorting': 'Spalte ziehen, um zu sortieren',
   'Table.deleteRow': 'Aktuele Zeile löschen',
   'Table.discard': 'Verwerfen',
   'Table.dragTip': 'Schaltfläche links zum Sortieren ziehen',
diff --git a/packages/amis-ui/src/locale/en-US.ts b/packages/amis-ui/src/locale/en-US.ts
index 9263f68557c..3e72ec91b19 100644
--- a/packages/amis-ui/src/locale/en-US.ts
+++ b/packages/amis-ui/src/locale/en-US.ts
@@ -232,6 +232,7 @@ register('en-US', {
   'Table.subAddRow': 'Add sub row',
   'Table.copyRow': 'Copy row',
   'Table.columnsVisibility': 'Click to control columns visibility',
+  'Table.columnsSorting': 'Drag column to sort',
   'Table.deleteRow': 'Delete current row',
   'Table.discard': 'Discard',
   'Table.dragTip': 'Drag the button on the left to sort',
diff --git a/packages/amis-ui/src/locale/zh-CN.ts b/packages/amis-ui/src/locale/zh-CN.ts
index 511b8c3a501..32cf085e0c3 100644
--- a/packages/amis-ui/src/locale/zh-CN.ts
+++ b/packages/amis-ui/src/locale/zh-CN.ts
@@ -236,6 +236,7 @@ register('zh-CN', {
   'Table.subAddRow': '新增孩子',
   'Table.copyRow': '复制一行',
   'Table.columnsVisibility': '点击选择显示列',
+  'Table.columnsSorting': '拖拽列修改显示顺序',
   'Table.deleteRow': '删除当前行',
   'Table.discard': '放弃',
   'Table.dragTip': '请拖动左边的按钮进行排序',
diff --git a/packages/amis/src/renderers/Table/ColumnToggler.tsx b/packages/amis/src/renderers/Table/ColumnToggler.tsx
index a036657fcc5..a8d066af3dd 100644
--- a/packages/amis/src/renderers/Table/ColumnToggler.tsx
+++ b/packages/amis/src/renderers/Table/ColumnToggler.tsx
@@ -209,10 +209,10 @@ export default class ColumnToggler<
     });
   }
 
-  swapColumnPosition(oldIndex: number, newIndex: number) {
-    const columns = this.state.tempColumns;
+  moveColumn(oldIndex: number, newIndex: number) {
+    const columns = [...this.state.tempColumns];
 
-    columns[oldIndex] = columns.splice(newIndex, 1, columns[oldIndex])[0];
+    columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
     this.setState({tempColumns: columns});
   }
 
@@ -266,23 +266,8 @@ export default class ColumnToggler<
         handle: `.${ns}ColumnToggler-menuItem-dragBar`,
         ghostClass: `${ns}ColumnToggler-menuItem--dragging`,
         onEnd: (e: any) => {
-          if (e.newIndex === e.oldIndex) {
-            return;
-          }
-
-          const parent = e.to as HTMLElement;
-          if (e.oldIndex < parent.childNodes.length - 1) {
-            parent.insertBefore(
-              e.item,
-              parent.childNodes[
-                e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex
-              ]
-            );
-          } else {
-            parent.appendChild(e.item);
-          }
-
-          this.swapColumnPosition(e.oldIndex, e.newIndex);
+          if (e.newIndex === e.oldIndex) return;
+          this.moveColumn(e.oldIndex, e.newIndex);
         }
       }
     );
@@ -389,10 +374,13 @@ export default class ColumnToggler<
           contentClassName={cx('ColumnToggler-modal')}
           container={modalContainer || this.target}
           overlay={typeof overlay === 'boolean' ? overlay : false}
+          draggable={true}
         >
           <header className={cx('ColumnToggler-modal-header')}>
             <span className={cx('ColumnToggler-modal-title')}>
-              {__('Table.columnsVisibility')}
+              {enableSorting
+                ? __('Table.columnsSorting')
+                : __('Table.columnsVisibility')}
             </span>
             <a
               data-tooltip={__('Dialog.close')}