chore: import beautiful dnd

frontend/appflowy_tauri/package.json

@@ -28,6 +28,7 @@
     "jest": "^29.5.0",
     "nanoid": "^4.0.0",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-i18next": "^12.2.0",
@@ -47,6 +48,7 @@
     "@types/is-hotkey": "^0.1.7",
     "@types/node": "^18.7.10",
     "@types/react": "^18.0.15",
+    "@types/react-beautiful-dnd": "^13.1.3",
     "@types/react-dom": "^18.0.6",
     "@types/utf8": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^5.51.0",

frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx

@@ -4,6 +4,7 @@ import { BoardBlock } from './BoardBlock';
 import { NewBoardBlock } from './NewBoardBlock';
 import { useDatabase } from '../_shared/database-hooks/useDatabase';
 import { ViewLayoutTypePB } from '@/services/backend';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 export const Board = ({ viewId }: { viewId: string }) => {
   const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Board);
@@ -22,24 +23,31 @@ export const Board = ({ viewId }: { viewId: string }) => {
           <SearchInput />
         </div>
       </div>
-      <div className={'relative w-full flex-1 overflow-auto'}>
-        <div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
-          {controller &&
-            groups &&
-            groups.map((group, index) => (
-              <BoardBlock
-                key={index}
-                viewId={viewId}
-                controller={controller}
-                rows={group.rows}
-                title={group.name}
-                allRows={rows}
-              />
-            ))}
-
-          <NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
+      <DragDropContext onDragEnd={(res) => console.log(res)}>
+        <div className={'relative w-full flex-1 overflow-auto'}>
+          <div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
+            {controller &&
+              groups &&
+              groups.map((group, index) => (
+                <Droppable droppableId={group.groupId} key={index}>
+                  {(provided, snapshot) => (
+                    <div className={'h-full'} {...provided.droppableProps} ref={provided.innerRef}>
+                      <BoardBlock
+                        key={index}
+                        viewId={viewId}
+                        controller={controller}
+                        rows={group.rows}
+                        title={group.name}
+                        allRows={rows}
+                      />
+                    </div>
+                  )}
+                </Droppable>
+              ))}
+            <NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
+          </div>
         </div>
-      </div>
+      </DragDropContext>
     </>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx

@@ -4,6 +4,7 @@ import { BoardCard } from './BoardCard';
 import { RowInfo } from '../../stores/effects/database/row/row_cache';
 import { DatabaseController } from '../../stores/effects/database/database_controller';
 import { RowPB } from '@/services/backend';
+import { Draggable } from 'react-beautiful-dnd';
 
 export const BoardBlock = ({
   viewId,
@@ -38,7 +39,13 @@ export const BoardBlock = ({
         {rows.map((row_pb, index) => {
           const row = allRows.find((r) => r.row.id === row_pb.id);
           return row ? (
-            <BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
+            <Draggable draggableId={row_pb.id} index={index}>
+              {(provided, snapshot) => (
+                <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                  <BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
+                </div>
+              )}
+            </Draggable>
           ) : (
             <span key={index}></span>
           );