发布于 2022-05-13, 更新于 2023-04-08
react-beautiful-dnd 的拖拽动画较为顺滑,比起同类型插件,拥有相对更简易的 api。
https://github.com/atlassian/react-beautiful-dnd
组成组件:
<DragDropContext /> - 可拖拽的上下文,可包含多个 <Droppable /><Droppable /> - 可拖拽元素组,内部包含 <Draggable /><Draggable /> - 操作的可拖拽元素这几个组件内的子元素如需设置行内样式,要把 provided.draggableProps.style 中的样式打散,如:
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
border: "1px solid blue",
}}
>
{item.content}
</div>
)}
</Draggable>
官方示例:
实现 copy 效果: