Fix drag and drop reordering in collection blocks (#1344)

The implementation of `moveBlock` was flawed. Moving blocks by swapping only works if the move happens between directly adjacent blocks. However, there are scenarios where the move should be performed between non-adjacent blocks, for instance when a block is dragged outside the block list (see screencasts). To fix this, we change the implementation to move by removing the block at the `from` index and inserting it at the `to` index.
vivid-planet · Oct 30, 2023 · 031d86e · 031d86e
1 parent 9aa7aac
commit 031d86e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 18 deletions.
diff --git a/.changeset/plenty-buckets-compete.md b/.changeset/plenty-buckets-compete.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": patch
+---
+
+Fix drag and drop reordering in collection blocks
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createBlocksBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createBlocksBlock.tsx
@@ -548,12 +548,13 @@ export function createBlocksBlock({
                                                                     onDeleteClick={() => {
                                                                         deleteBlocks([data.key]);
                                                                     }}
-                                                                    moveBlock={(dragIndex: number, hoverIndex: number) => {
-                                                                        const blocks = [...state.blocks];
-                                                                        const dragItem = state.blocks[dragIndex];
-                                                                        blocks[dragIndex] = state.blocks[hoverIndex];
-                                                                        blocks[hoverIndex] = dragItem;
-                                                                        updateState((prevState) => ({ ...prevState, blocks }));
+                                                                    moveBlock={(from, to) => {
+                                                                        updateState((prevState) => {
+                                                                            const blocks = [...prevState.blocks];
+                                                                            const blockToMove = blocks.splice(from, 1)[0];
+                                                                            blocks.splice(to, 0, blockToMove);
+                                                                            return { ...prevState, blocks };
+                                                                        });
                                                                     }}
                                                                     visibilityButton={
                                                                         <IconButton onClick={() => toggleVisible(data.key)} size="small">

diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -310,12 +310,13 @@ export function createColumnsBlock<T extends BlockInterface>({
                                                                             onDeleteClick={() => {
                                                                                 deleteBlocks([column.key]);
                                                                             }}
-                                                                            moveBlock={(dragIndex: number, hoverIndex: number) => {
-                                                                                const columns = [...state.columns];
-                                                                                const dragItem = state.columns[dragIndex];
-                                                                                columns[dragIndex] = state.columns[hoverIndex];
-                                                                                columns[hoverIndex] = dragItem;
-                                                                                updateState((prevState) => ({ ...prevState, columns }));
+                                                                            moveBlock={(from, to) => {
+                                                                                updateState((prevState) => {
+                                                                                    const columns = [...prevState.columns];
+                                                                                    const columnToMove = columns.splice(from, 1)[0];
+                                                                                    columns.splice(to, 0, columnToMove);
+                                                                                    return { ...prevState, columns };
+                                                                                });
                                                                             }}
                                                                             visibilityButton={
                                                                                 <IconButton onClick={() => toggleVisible(column.key)} size="small">

diff --git a/packages/admin/blocks-admin/src/blocks/factories/createListBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createListBlock.tsx
@@ -265,12 +265,13 @@ export function createListBlock<T extends BlockInterface>({
                                                                         onDeleteClick={() => {
                                                                             deleteBlocks([data.key]);
                                                                         }}
-                                                                        moveBlock={(dragIndex: number, hoverIndex: number) => {
-                                                                            const blocks = [...state.blocks];
-                                                                            const dragItem = state.blocks[dragIndex];
-                                                                            blocks[dragIndex] = state.blocks[hoverIndex];
-                                                                            blocks[hoverIndex] = dragItem;
-                                                                            updateState((prevState) => ({ ...prevState, blocks }));
+                                                                        moveBlock={(from, to) => {
+                                                                            updateState((prevState) => {
+                                                                                const blocks = [...prevState.blocks];
+                                                                                const blockToMove = blocks.splice(from, 1)[0];
+                                                                                blocks.splice(to, 0, blockToMove);
+                                                                                return { ...prevState, blocks };
+                                                                            });
                                                                         }}
                                                                         visibilityButton={
                                                                             canChangeVisibility ? (