react-beautiful-dnd with ant design list

react-react-beautiful-dnd-ant-design.js

  <DragDropContext onDragEnd={this.onDragEnd}>
            <Droppable droppableId={mover.id}>
              {(provided, snapshot) => (
                <div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)}>
                  <List itemLayout="horizontal">
                    {mover.list.map((item, index) => {
                      // test
                      if (item.format === 'folder') {
                        return (
                          <List.Item key={item.id}>
                            <List.Item.Meta
                              style={{ cursor: 'pointer' }}
                              onDoubleClick={this.props.handleItemSelect(item)}
                              avatar={
                                <Avatar>
                                  <Icon type={getMappedIconWithMime(item.format)} />
                                </Avatar>
                              }
                              title={item.name}
                            />
                          </List.Item>
                        );
                      }
                      return (
                        <Draggable key={item.id} draggableId={item.id} index={index}>
                          {(provided, snapshot) => (
                            <div
                              ref={provided.innerRef}
                              {...provided.draggableProps}
                              {...provided.dragHandleProps}
                              style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
                            >
                              <List.Item key={item.id}>
                                <List.Item.Meta
                                  style={{ cursor: 'pointer' }}
                                  onDoubleClick={this.props.handleItemSelect(item)}
                                  avatar={
                                    <Avatar>
                                      <Icon type={getMappedIconWithMime(item.format)} />
                                    </Avatar>
                                  }
                                  title={item.name}
                                />
                              </List.Item>
                            </div>
                          )}
                        </Draggable>
                      );
                    })}
                  </List>
                </div>
              )}
            </Droppable>
          </DragDropContext>

Thankyou! I tried to write react-beautiful-dnd with ant design, multi drag table
Here is a Codesandbox: https://codesandbox.io/s/react-beautiful-dnd-examples-multi-drag-table-with-antd-gptbl