diff --git a/packages/grid/x-grid-modules/src/components/column-header-item.tsx b/packages/grid/x-grid-modules/src/components/column-header-item.tsx
index 9ff7adf8b34db..7bdb91b744a59 100644
--- a/packages/grid/x-grid-modules/src/components/column-header-item.tsx
+++ b/packages/grid/x-grid-modules/src/components/column-header-item.tsx
@@ -38,7 +38,7 @@ export const ColumnHeaderItem = React.memo(
     }
 
     const onResize = onResizeColumn ? () => onResizeColumn(column) : undefined;
-    const onDragStart = onColumnDragStart ? (e) => onColumnDragStart(column, e.target) : undefined;
+    const onDragStart = onColumnDragStart ? (event) => onColumnDragStart(column, event.target) : undefined;
     const onDragEnter = onColumnDragEnter ? () => onColumnDragEnter(column) : undefined;
 
     const width = column.width!;
diff --git a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx
index c1c6b431b476f..9c5cfba7c44c3 100644
--- a/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx
+++ b/packages/grid/x-grid-modules/src/components/styled-wrappers/grid-root.tsx
@@ -155,11 +155,10 @@ export const RootStyle = styled.div<GridRootProps>`
             padding: 12px;
           }
           .dragging {
-            background: gray;
-            color: white;
+            background: #f9f9f9;
             padding: 0 12px;
             border-radius: 10px;
-            opacity: 0.3;
+            opacity: 0.4;
           }
         }
         &.scroll .material-col-cell:last-child {
diff --git a/packages/grid/x-grid-modules/src/constants/eventsConstants.ts b/packages/grid/x-grid-modules/src/constants/eventsConstants.ts
index 8991ff637f029..c2163f00ceab1 100644
--- a/packages/grid/x-grid-modules/src/constants/eventsConstants.ts
+++ b/packages/grid/x-grid-modules/src/constants/eventsConstants.ts
@@ -29,6 +29,9 @@ export const SCROLLING_STOP = 'scrolling:stop';
 export const COL_RESIZE_START = 'colResizing:start';
 export const COL_RESIZE_STOP = 'colResizing:stop';
 
+export const COL_REORDER_START = 'colReordering:start';
+export const COL_REORDER_STOP = 'colReordering:stop';
+
 export const ROWS_UPDATED = 'rowsUpdated';
 export const COLUMNS_UPDATED = 'columnsUpdated';
 
diff --git a/packages/grid/x-grid-modules/src/hooks/features/useColumnReorder.tsx b/packages/grid/x-grid-modules/src/hooks/features/useColumnReorder.tsx
index 0f0a1920aa6bf..f40028f84da14 100644
--- a/packages/grid/x-grid-modules/src/hooks/features/useColumnReorder.tsx
+++ b/packages/grid/x-grid-modules/src/hooks/features/useColumnReorder.tsx
@@ -2,6 +2,17 @@ import * as React from 'react';
 import { ColDef } from '../../models/colDef';
 import { useLogger } from '../utils';
 import { ApiRef } from '../../models';
+import { COL_REORDER_START, COL_REORDER_STOP } from '../../constants/eventsConstants';
+
+const reorderColDefArray = (
+  columns: ColDef[],
+  newColIndex: number,
+  oldColIndex: number
+): ColDef[] => {
+  const columnsClone = JSON.parse(JSON.stringify(columns))
+
+  return columnsClone.splice(newColIndex, 0, columnsClone.splice(oldColIndex, 1)[0]);
+};
 
 export const useColumnReorder = (
   apiRef: ApiRef
@@ -14,9 +25,11 @@ export const useColumnReorder = (
   const handleDragStart = React.useCallback(
     (col: ColDef, htmlEl: any): void => {
       logger.debug(`Start dragging col ${col.field}`);
+      apiRef.current.publishEvent(COL_REORDER_START);
+
       dragCol.current = col;
       dragColNode.current = htmlEl;
-      dragColNode.current?.addEventListener('dragend', handleDragEnd);
+      dragColNode.current?.addEventListener('dragend', handleDragEnd, { once: true });
       dragColNode.current?.classList.add('dragging');
       setTimeout(() => {
         dragColNode.current?.classList.remove('dragging');
@@ -39,9 +52,9 @@ export const useColumnReorder = (
           rowIndex: 0
         });
 
-        columnsSnapshot.splice(targetColIndex, 0, columnsSnapshot.splice(dragColIndex, 1)[0]);
+        const columnsReordered = reorderColDefArray(columnsSnapshot, targetColIndex, dragColIndex);
 
-        apiRef.current.updateColumns(columnsSnapshot, true);
+        apiRef.current.updateColumns(columnsReordered, true);
       }
     },
     [apiRef, logger]
@@ -50,6 +63,7 @@ export const useColumnReorder = (
   const handleDragEnd = React.useCallback(
     (): void => {
       logger.debug(`End dragging col ${dragCol.current!.field}`);
+      apiRef.current.publishEvent(COL_REORDER_STOP);
 
       dragColNode.current?.removeEventListener('dragend', handleDragEnd);
       dragCol.current = null;
diff --git a/packages/grid/x-grid-modules/src/models/api/columnApi.ts b/packages/grid/x-grid-modules/src/models/api/columnApi.ts
index 3540185ca4df4..36bbd2edcc5cd 100644
--- a/packages/grid/x-grid-modules/src/models/api/columnApi.ts
+++ b/packages/grid/x-grid-modules/src/models/api/columnApi.ts
@@ -51,6 +51,7 @@ export interface ColumnApi {
    * Allows to batch update multiple columns at the same time.
    *
    * @param cols [[ColDef[]]]
+   * @param resetState
    */
-  updateColumns: (cols: ColDef[], resetState: boolean) => void;
+  updateColumns: (cols: ColDef[], resetState?: boolean) => void;
 }