React仪表板多行多列卡片XY方向拖拽重排方案咨询

我正在React中开发一款仪表板，需要创建多个可拖拽重排的卡片。参考示例框架：

上图包含5行布局，每行的列数各不相同。我需要实现以下拖拽重排功能：

• X方向（行内横向）：每行内的卡片可调整横向顺序
• Y方向（行间纵向）：所有行可调整纵向顺序

为实现该功能，我已尝试使用react-dnd，相关代码如下：

import React from "react";
import { useDrag, useDrop, DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const DraggableItem = ({ children }) => {
  const [{ isDragging }, dragRef] = useDrag(() => ({
    type: "item",
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div ref={dragRef} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {children}
    </div>
  );
};

const DroppableArea = () => {
  const [, dropRef] = useDrop(() => ({
    accept: "item",
    drop: (item, monitor) => {
      // handle drop event
      console.log("Item dropped:", item);
    },
  }));

  return <div ref={dropRef}>Droppable Area</div>;
};

export const ChartDashboard = () => (
  <DndProvider backend={HTML5Backend}>
    <main className="w-full p-4 pt-20 overflow-scroll h-screen">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        <DraggableItem>
          <div className="border-2 border-dashed border-gray-300 rounded-lg dark:border-gray-600 h-32 md:h-64">
            1
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64">
            2
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64">
            3
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-32 md:h-64">
            4
          </div>
        </DraggableItem>
      </div>
      <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4">
        5
      </div>
      <div className="grid grid-cols-2 gap-4 mb-4">
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            6
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            7
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            8
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            9
          </div>
        </DraggableItem>
      </div>
      <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-96 mb-4">
        10
      </div>
      <div className="grid grid-cols-2 gap-4">
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            11
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            12
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            13
          </div>
        </DraggableItem>
        <DraggableItem>
          <div className="border-2 border-dashed rounded-lg border-gray-300 dark:border-gray-600 h-48 md:h-72">
            14
          </div>
        </DraggableItem>
      </div>
      <DroppableArea />
    </main>
  </DndProvider>
);

我需要帮助完成该功能的开发，不确定选用哪个拖拽库最为合适，希望获得技术支持。支持该功能的其他库还有react-beautiful-dnd、react-sortable-hoc等，使用任意合适的库均可。

内容的提问来源于stack exchange，提问作者Saswata Arabinda