Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save samundrak/98c4868eb6c817ac2b3e52fb57d7b983 to your computer and use it in GitHub Desktop.
Save samundrak/98c4868eb6c817ac2b3e52fb57d7b983 to your computer and use it in GitHub Desktop.
react-beautiful-dnd with ant design list
<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>
@adjieindrawan
Copy link

Hi @samundrak, can i see full code on this projects?
Still confused user react beauty dnd with ant design.

@nnt25251325
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment