<p align="center">
<img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="react beautiful dnd logo" />
</p>
<h1 align="center">react-beautiful-dnd <small><sup>(rbd)</sup></small></h1>
<div align="center">
**Beautiful** and **accessible** drag and drop for lists with [`React`](https://facebook.github.io/react/)
[![CircleCI branch](https://img.shields.io/circleci/project/github/atlassian/react-beautiful-dnd/master.svg)](https://circleci.com/gh/atlassian/react-beautiful-dnd/tree/master)
[![npm](https://img.shields.io/npm/v/react-beautiful-dnd.svg)](https://www.npmjs.com/package/react-beautiful-dnd)
![quote application example](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif)
[Play with this example if you want!](https://react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&selectedStory=simple)
</div>
## Core characteristics
- Beautiful and [natural movement](/docs/about/animations.md) of items ð
- [Accessible](/docs/about/accessibility.md): powerful keyboard and screen reader support â¿ï¸
- [Extremely performant](/docs/support/media.md) ð
- Clean and powerful api which is simple to get started with
- Plays extremely well with standard browser interactions
- [Unopinionated styling](/docs/guides/preset-styles.md)
- No creation of additional wrapper dom nodes - flexbox and focus management friendly!
## Get started ð©âð«
We have created [a free course on `egghead.io` ð¥](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd) to help you get started with `react-beautiful-dnd` as quickly as possible.
[![course-logo](https://user-images.githubusercontent.com/2182637/43372837-8c72d3f8-93e8-11e8-9d92-a82adde7718f.png)](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)
## Currently supported feature set â
- Vertical lists â
- Horizontal lists â
- Movement between lists (⤠â â¤)
- [Virtual list support ð¾](/docs/patterns/virtual-lists.md) - unlocking 10,000 items @ 60fps
- [Combining items](/docs/guides/combining.md)
- Mouse ð, keyboard ð¹â¿ï¸ and touch ðð± (mobile, tablet and so on) support
- [Multi drag support](/docs/patterns/multi-drag.md)
- Incredible screen reader support â¿ï¸ - we provide an amazing experience for english screen readers out of the box ð¦. We also provide complete customisation control and internationalisation support for those who need it ð
- [Conditional dragging](/docs/api/draggable.md#optional-props) and [conditional dropping](/docs/api/droppable.md#conditionally-dropping)
- Multiple independent lists on the one page
- Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
- [Add and remove items during a drag](/docs/guides/changes-while-dragging.md)
- Compatible with semantic `<table>` reordering - [table pattern](/docs/patterns/tables.md)
- [Auto scrolling](/docs/guides/auto-scrolling.md) - automatically scroll containers and the window as required during a drag (even with keyboard ð¥)
- Custom drag handles - you can drag a whole item by just a part of it
- Able to move the dragging item to another element while dragging (clone, portal) - [Reparenting your `<Draggable />`](/docs/guides/reparenting.md)
- [Create scripted drag and drop experiences ð®](/docs/sensors/sensor-api.md)
- Allows extensions to support for [any input type you like ð¹](/docs/sensors/sensor-api.md)
- ð² Tree support through the [`@atlaskit/tree`](https://atlaskit.atlassian.com/packages/confluence/tree) package
- A `<Droppable />` list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
- Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
- Server side rendering (SSR) compatible - see [resetServerContext()](/docs/api/reset-server-context.md)
- Plays well with [nested interactive elements](/docs/api/draggable.md#interactive-child-elements-within-a-draggable-) by default
## Motivation ð¤
`react-beautiful-dnd` exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:
- ð [Rethinking drag and drop](https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b)
- ð§ [React podcast: fast, accessible and beautiful drag and drop](https://reactpodcast.simplecast.fm/17)
## Not for everyone âï¸
There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing [`react-dnd`](https://github.com/react-dnd/react-dnd). It does an incredible job at providing a great set of drag and drop primitives which work especially well with the [wildly inconsistent](https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) html5 drag and drop feature. `react-beautiful-dnd` is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality `react-beautiful-dnd` offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by `react-dnd`. So `react-beautiful-dnd` might not be for you depending on what your use case is.
## Documentation ð
### About ð
- [Installation](/docs/about/installation.md)
- [Examples and samples](/docs/about/examples.md)
- [Get started](https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd)
- [Design principles](/docs/about/design-principles.md)
- [Animations](/docs/about/animations.md)
- [Accessibility](/docs/about/accessibility.md)
- [Browser support](/docs/about/browser-support.md)
### Sensors ð
> The ways in which somebody can start and control a drag
- [Mouse dragging ð](/docs/sensors/mouse.md)
- [Touch dragging ðð±](/docs/sensors/touch.md)
- [Keyboard dragging ð¹â¿ï¸](/docs/sensors/keyboard.md)
- [Create your own sensor](/docs/sensors/sensor-api.md) (allows for any input type as well as scripted experiences)
### API ðï¸â
![diagram](https://user-images.githubusercontent.com/2182637/53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif)
- [`<DragDropContext />`](/docs/api/drag-drop-context.md) - _Wraps the part of your application you want to have drag and drop enabled for_
- [`<Droppable />`](/docs/api/droppable.md) - _An area that can be dropped into. Contains `<Draggable />`s_
- [`<Draggable />`](/docs/api/draggable.md) - _What can be dragged around_
- [`resetServerContext()`](/docs/api/reset-server-context.md) - _Utility for server side rendering (SSR)_
### Guides ðº
- [`<DragDropContext />` responders](/docs/guides/responders.md) - _`onDragStart`, `onDragUpdate`, `onDragEnd` and `onBeforeDragStart`_
- [Combining `<Draggable />`s](/docs/guides/combining.md)
- [Common setup issues](/docs/guides/common-setup-issues.md)
- [Using `innerRef`](/docs/guides/using-inner-ref.md)
- [Setup problem detection and error recovery](/docs/guides/setup-problem-detection-and-error-recovery.md)
- [Rules for `draggableId` and `droppableId`s](/docs/guides/identifiers.md)
- [Browser focus retention](/docs/guides/browser-focus.md)
- [Customising or skipping the drop animation](/docs/guides/drop-animation.md)
- [Auto scrolling](/docs/guides/auto-scrolling.md)
- [Controlling the screen reader](/docs/guides/screen-reader.md)
- [Use the html5 `doctype`](/docs/guides/doctype.md)
- [`TypeScript` and `flow`: type information](/docs/guides/types.md)
- [Dragging `<svg>`s](/docs/guides/dragging-svgs.md)
- [Avoiding image flickering](/docs/guides/avoiding-image-flickering.md)
- [Non-visible preset styles](/docs/
没有合适的资源?快使用搜索试试~ 我知道了~
react-beautiful-dnd:使用React进行列表的漂亮易用的拖放操作
共790个文件
js:650个
jsx:61个
md:49个
5星 · 超过95%的资源 需积分: 50 6 下载量 38 浏览量
2021-02-05
18:22:52
上传
评论
收藏 1.17MB ZIP 举报
温馨提示
react-beautiful-dnd (rbd) 美丽和方便的拖放处理列表 核心特征 物品优美的 :bouquet: :强大的键盘和屏幕阅读器支持 :wheelchair_symbol: :rocket: 干净而强大的api,易于上手 在标准的浏览器交互中发挥出色 无需创建其他包装dom节点-友好的flexbox和焦点管理! 开始吧 :school: 我们创建 帮助您尽快开始使用react-beautiful-dnd 。 当前支持的功能集 :check_mark_button: 垂直清单 :up-down_arrow: 水平清单 :left-right_arrow: 列表之间的移动(▤ :left-right_arrow: ▤) -以60fps的速度解锁10,000个项目 老鼠 :mouse_face: 键盘 :musical_keyboard: :wheelchair_symbol: 和触摸 :backhand_index_pointing_right: :mobile_phone: (移动设备,平板电脑等)支持 令人难以置信的屏
资源推荐
资源详情
资源评论
收起资源包目录
react-beautiful-dnd:使用React进行列表的漂亮易用的拖放操作 (790个子文件)
.babelrc 335B
.browserlistrc 167B
.eslintignore 68B
.flowconfig 666B
.gitignore 319B
.gitkeep 0B
.gitkeep 0B
.gitkeep 0B
preview-head.html 203B
stylelint_vx.x.x.js 108KB
lighthouse_vx.x.x.js 102KB
eslint_vx.x.x.js 82KB
eslint-plugin-jsx-a11y_vx.x.x.js 49KB
runtime_vx.x.x.js 36KB
jest_vx.x.x.js 34KB
get-best-cross-axis-droppable.spec.js 32KB
eslint-plugin-react_vx.x.x.js 28KB
jump-scroller.spec.js 21KB
eslint-plugin-flowtype_vx.x.x.js 19KB
stylelint-processor-styled-components_vx.x.x.js 19KB
dimension.js 19KB
webpack_v4.x.x.js 18KB
publish-while-dragging.spec.js 18KB
publishing.spec.js 17KB
is-totally-visible.spec.js 16KB
is-partially-visible.spec.js 16KB
can-scroll.spec.js 15KB
in-foreign-list.spec.js 15KB
eslint-plugin-import_vx.x.x.js 15KB
to-foreign-list.spec.js 14KB
droppable-scrolling.spec.js 14KB
scroll-watching.spec.js 14KB
speculative-displacement.spec.js 13KB
use-touch-sensor.js 13KB
markdown-it_vx.x.x.js 13KB
window-scrolling.spec.js 13KB
without-starting-displacement.spec.js 12KB
types.js 12KB
with-placeholder.spec.js 12KB
placeholder.spec.js 12KB
eslint-plugin-jest_vx.x.x.js 12KB
use-sensor-marshal.js 12KB
reducer.js 12KB
responders-integration.spec.js 12KB
in-home-list.spec.js 11KB
use-draggable-publisher.spec.js 11KB
core_vx.x.x.js 11KB
started-after-critical.spec.js 11KB
started-before-critical.spec.js 11KB
react-redux_v7.x.x.js 11KB
not-visible-in-droppable.spec.js 11KB
connected-draggable.js 11KB
not-visible-in-viewport.spec.js 11KB
initial-publish.spec.js 10KB
displacement-visibility.spec.js 10KB
use-mouse-sensor.js 10KB
react_v9.x.x.js 10KB
theme_vx.x.x.js 9KB
something-else-is-dragging.spec.js 9KB
did-not-start-after-critical.spec.js 9KB
dragging.spec.js 9KB
use-droppable-publisher.js 8KB
get-displacement-groups.spec.js 8KB
preset-env_vx.x.x.js 8KB
fs-extra_vx.x.x.js 8KB
connected-droppable.js 8KB
big-draggables.spec.js 8KB
utils.js 7KB
get-droppable.spec.js 7KB
.eslintrc.js 7KB
time-dampening.spec.js 7KB
started-after-critical.spec.js 7KB
prettier_v1.x.x.js 7KB
style-marshal.spec.js 7KB
action-creators.js 7KB
announcements.spec.js 6KB
publisher.js 6KB
conditionally-animate-drop.spec.js 6KB
in-home-list.legacy.spec.js 6KB
dropping.spec.js 6KB
recompute-placeholders.spec.js 6KB
eslint-plugin-es5_vx.x.x.js 6KB
with-starting-displacement.spec.js 6KB
started-before-critical.spec.js 6KB
when-combining.spec.js 6KB
validation.spec.js 6KB
dropping.spec.js 6KB
droppable-passthrough.spec.js 6KB
started-after-critical.spec.js 6KB
to-home-list.spec.js 6KB
use-keyboard-sensor.js 6KB
move-in-direction.spec.js 6KB
dimension-marshal.js 6KB
reorder-render-sync.spec.js 6KB
post-drop.spec.js 6KB
shared.js 6KB
drop-position.spec.js 6KB
get-simple-state-preset.js 5KB
get-best-cross-axis-droppable.js 5KB
with-droppable-scroll.spec.js 5KB
共 790 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
缪之初
- 粉丝: 31
- 资源: 4720
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页