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>

官方示例：

• https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/about/examples.md
• https://react-beautiful-dnd.netlify.app/
• 以上代码在： https://github.com/atlassian/react-beautiful-dnd/tree/master/stories

实现 copy 效果：

• https://github.com/atlassian/react-beautiful-dnd/issues/2171
• https://codesandbox.io/s/react-beautiful-dnd-copy-and-drag-5trm0
• 注意 react-beautiful-dnd 版本，和 styled-components 版本 (创建的组件使用 innerRef，新版改称 ref)