我如何在 Ant Design List 中使用 react-beautiful-dnd？

Question

我正在使用蚂蚁设计列表。我想用 react-beautiful-dnd 拖动它们并对其进行排序。但是当我尝试拖动时，它没有拖动任何东西并且它给了我 2 个错误：

Invariant failed: Cannot collect without a droppable ref

&&

Invariant failed: Cannot stop drag when no active drag

我该如何解决？我的代码：

const someData = [
  {
    id: "gary",
    sort: 1,
    name: "Gary Goodspeed",
    thumb: "/images/gary.png"
  },
  {
    id: "cato",
    sort: 0,
    name: "Little Cato",
    thumb: "/images/cato.png"
  },

  {
    id: "kvn",
    sort: 2,
    name: "KVN",
    thumb: "/images/kvn.png"
  },
  {
    id: "mooncake",
    sort: 3,
    name: "Mooncake",
    thumb: "/images/mooncake.png"
  },
  {
    id: "quinn",
    sort: 4,
    name: "Quinn Ergon",
    thumb: "/images/quinn.png"
  }
];
export default function App() {
  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(someData);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);
    const Obj = [];

    console.log("obj", Obj);
  }
  return (
    <div className="App">
      <DragDropContext onDragEnd={handleOnDragEnd}>
        <Droppable droppableId="DropId">
          {(provided) => (
            <List
              header={
                <div className="w-full m-0 p-0  ">
                  <p>Header</p>
                </div>
              }
              bordered
              rowKey="Id"
              dataSource={someData && someData}
              size="small"
              renderItem={(item, index) => (
                <Draggable draggableId="DropId" index={index}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                    >
                      <List.Item>
                        <span
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                        >
                          {item.name}
                        </span>

                        {provided.placeholder}
                      </List.Item>
                    </div>
                  )}
                </Draggable>
              )}
            ></List>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

我尝试在 List.Item 之外编写 Draggable，但与 div 的结果相同。感谢您的所有回答！有关详细信息：我的沙箱：codesandbox.io/s/relaxed-saha-q0lfs

Answer 1

因为你在同一个列表中拖放，你需要用 <div> 包裹你的列表并传递 Droppable 组件提供的道具。

 <Droppable droppableId="DropId">
    {(provided) => (
       <div ref={provided.innerRef} {...provided.droppableProps}>
          <List ... />
          {provided.placeholder}
       </div>
    )}
</Droppable>

此外，将可拖动道具传递给包裹在 <List.item> 上的 <div> 就足够了。我们可以删除包裹在 {item.name} 上的 <span>。

Drag Drop Example

我如何在 Ant Design List 中使用 react-beautiful-dnd？

How can i use react-beautiful-dnd inside of Ant Desing List?

javascript

drag-and-drop

reactjs

antd