react-beautiful-dnd ^(rbd)

使用 React 实现的美观且易于访问的列表拖放功能

核心特性

• 美观自然的动画效果](/docs/about/animations.md) 💐
• 无障碍：强大的键盘和屏幕阅读器支持 ♿️
• 极致性能 🚀
• 简洁强大的 API，易于上手
• 与标准浏览器交互流畅
• 无拘无束的样式
• 无需创建额外的 DOM 节点 - 支持 Flexbox 布局和焦点管理！

当前支持的功能集✅

• 垂直列表 ↕
• 水平列表 ↔
• 列表间移动 (▤ ↔ ▤)
• 虚拟列表支持 👾 - 以 60fps 的速度解锁 10,000 个项目
• 合并项目
• 支持鼠标🐭、键盘🎹♿️和触摸👉📱（移动设备、平板电脑等）
• 多点拖动支持
• 卓越的屏幕阅读器支持♿️ - 我们为英语屏幕阅读器用户提供开箱即用的卓越体验📦。我们还为有需要的用户提供全面的自定义控制和国际化支持💖
• 条件拖动 和 条件放置
• 同一页面上多个独立列表
• 灵活的项目大小 - 可拖动项目可以具有不同的高度（垂直列表）或宽度（水平列表）
• 拖动过程中添加和删除项目
• 兼容语义化 <table> 重新排序 - 表格模式
• 自动滚动 - 拖动过程中根据需要自动滚动容器和窗口（即使使用键盘🔥）
• 自定义拖动手柄 - 您可以拖动项目的一部分来拖动整个项目
  -能够在拖动过程中将拖动项移动到另一个元素（克隆、门户）- 重新设置 <Draggable /> 的父级
• 创建脚本化的拖放体验 🎮
• 允许扩展支持 任何您喜欢的输入类型 🕹
• 🌲 通过 @atlaskit/tree 包支持树形布局
• <Droppable /> 列表可以是滚动容器（没有可滚动的父级），也可以是滚动容器的子级（同样没有可滚动的父级）
• 独立嵌套列表 - 一个列表可以是另一个列表的子级，但您不能将项目从父列表拖放到子列表中
• 服务器端渲染兼容 (SSR) - 参见 resetServerContext()
• 默认兼容 嵌套交互元素

动机 🤔

react-beautiful-dnd 旨在创建美观的列表拖放功能，任何人都可以使用，即使是无法看到列表的人也可以使用。为了更好地了解该项目的历史和动机，您可以查看以下外部资源：

• 📖 重新思考拖放
• 🎧 React 播客：快速、易用且美观的拖放功能

并非适合所有人✌️

有很多库允许在 React 中进行拖放交互。其中最引人注目的是令人惊叹的 react-dnd。它出色地提供了一组出色的拖放原语，尤其适用于极不一致的 html5 拖放功能。react-beautiful-dnd 是专为列表（垂直、水平、列表间移动、嵌套列表等）构建的更高级别的抽象。在该功能子集内，react-beautiful-dnd 提供了强大、自然且美观的拖放体验。然而，它的功能不如 react-dnd 广泛。因此，根据您的用例，react-beautiful-dnd 可能不适合您。

安装

常规

1. 添加 react-beautiful-dnd 包

# yarn
yarn add react-beautiful-dnd

# npm
npm install react-beautiful-dnd --save

2. 使用包

import { DragDropContext } from 'react-beautiful-dnd';

3. 收益🕺

React 环境

为了使用 react-beautiful-dnd，你可能需要设置一个 React 环境。

• 将 React 添加到网站 - 官方 React 文档
• 使用 create-react-app 设置 React 环境 - 来自我们的 免费入门课程

分发包

通用模块定义 包已发布在 npm 的 /dist 文件夹下，可供使用。我们发布以下文件：

• dist/react-beautiful-dnd.js
• dist/react-beautiful-dnd.min.js（最小化包）

这些包将 react 列为需要提供的外部包。这样做是为了减小包的大小，并防止用户多次加载 react。您可以通过模块系统提供 react，也可以直接在 window 上加载 react。

您可以使用 UMD 直接在浏览器中运行 react-beautiful-dnd。

<!-- 同级依赖 -->
<script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
<!-- lib（将 x.x.x 更改为您想要的版本）-->
<script src="https://unpkg.com/react-beautiful-dnd@x.x.x/dist/react-beautiful-dnd.js"></script>
<!-- 需要挂载您的 React 应用 -->
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>

<script>
const React = window.React;
const ReactDOM = window.ReactDOM;
const { DragDropContext, Draggable, Droppable } = window.ReactBeautifulDnd;

function App() {
// ...
}

// 如果你的环境支持，你可以使用 JSX
ReactDOM.render(React.createElement(App), document.getElementById('app'));
</script>

还有一个 示例 codepen 可以用来演示这种安装方法。

ClojureScript

你可以在 ClojureScript 中使用 CLJSJS 来使用 react-beautiful-dnd！