黑白梦

toggle nav

react-beautiful-dnd 拖拽排序库

发布于 2022-05-12, 更新于 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 效果：

本文收录于专栏

一些好用的 npm 前端开源库

收集一些好用的前端开源库，主要是 npm 包