From 88b2b54232f18b5a597cbdee14cebf38a9b65076 Mon Sep 17 00:00:00 2001
From: linxianxi <47104575+linxianxi@users.noreply.github.com>
Date: Wed, 31 May 2023 13:36:20 +0800
Subject: [PATCH] demo: fix the table moves when dragging elements to the right
 (#42745)

* demo: fix the layout/table moves when dragging elements to the right

* fix: package json
---
 components/table/demo/drag-sorting-handler.tsx | 8 +++-----
 components/table/demo/drag-sorting.tsx         | 3 ++-
 package.json                                   | 1 +
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/table/demo/drag-sorting-handler.tsx b/components/table/demo/drag-sorting-handler.tsx
index 5809c0b817..7f13365cae 100644
--- a/components/table/demo/drag-sorting-handler.tsx
+++ b/components/table/demo/drag-sorting-handler.tsx
@@ -1,6 +1,7 @@
 import { MenuOutlined } from '@ant-design/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   arrayMove,
   SortableContext,
@@ -56,10 +57,7 @@ const Row = ({ children, ...props }: RowProps) => {
 
   const style: React.CSSProperties = {
     ...props.style,
-    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 })?.replace(
-      /translate3d\(([^,]+),/,
-      'translate3d(0,',
-    ),
+    transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
     transition,
     ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
   };
@@ -118,7 +116,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <DndContext onDragEnd={onDragEnd}>
+    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
       <SortableContext
         // rowKey array
         items={dataSource.map((i) => i.key)}
diff --git a/components/table/demo/drag-sorting.tsx b/components/table/demo/drag-sorting.tsx
index 3a0e852988..f6d9269759 100644
--- a/components/table/demo/drag-sorting.tsx
+++ b/components/table/demo/drag-sorting.tsx
@@ -1,5 +1,6 @@
 import type { DragEndEvent } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   arrayMove,
   SortableContext,
@@ -87,7 +88,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <DndContext onDragEnd={onDragEnd}>
+    <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
       <SortableContext
         // rowKey array
         items={dataSource.map((i) => i.key)}
diff --git a/package.json b/package.json
index 11e92acd61..1dfe076a5d 100644
--- a/package.json
+++ b/package.json
@@ -163,6 +163,7 @@
     "@argos-ci/core": "^0.8.0",
     "@babel/eslint-plugin": "^7.19.1",
     "@dnd-kit/core": "^6.0.7",
+    "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@emotion/babel-preset-css-prop": "^11.10.0",