import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
// 拖拽结束回调
onDragEnd = (result) => {
const { source, destination, draggableId } = result;
if (!destination) {
return;
}
...
};
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppableId">
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
list.map((item, index) => {
return (
<Draggable
draggableId={`${item.sort}`}
index={index}
key={item.sort}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
>
{/* 拖拽图标 */}
<div
key={index}
{...provided.dragHandleProps}
/>
<div>内容内容</div>
</div>
)}
</Draggable>
);
})
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
