import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
// 拖拽結(jié)束回調(diào)
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}
>
{/* 拖拽圖標(biāo) */}
<div
key={index}
{...provided.dragHandleProps}
/>
<div>內(nèi)容內(nèi)容</div>
</div>
)}
</Draggable>
);
})
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
