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

Question

I using ant Desing list. I want drag and sort them with react-beautiful-dnd. But while i trying drag, its not dragging any and its giving me that 2 error :

Invariant failed: Cannot collect without a droppable ref

&&

Invariant failed: Cannot stop drag when no active drag 

How can i solve it ? My codes :

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>
  );
}

I tried write Draggable outside of List.Item but its same result with div. Thanks for all answers! For more details : My sandbox : codesandbox.io/s/relaxed-saha-q0lfs

Answer 1

Since you are Dragging and Dropping in the same list, you need to wrap your list with the <div> and pass the props provided from the Droppable component .

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

Also it is just enough to pass the draggable props to the <div> wrapped over the <List.item> . We can remove the <span> wrapped over the {item.name}.

Drag Drop Example