• Stars
    star
    32,990
  • Rank 508 (Top 0.02 %)
  • Language
    JavaScript
  • License
    Other
  • Created about 7 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Beautiful and accessible drag and drop for lists with React

โš ๏ธ Maintenance & support

This library continues to be relied upon heavily by Atlassian products, but we are focused on other priorities right now and have no current plans for further feature development or improvements.

It will continue to be here on GitHub and we will still make critical updates (e.g. security fixes, if any) as required, but will not be actively monitoring or replying to issues and pull requests.

We recommend that you donโ€™t raise issues or pull requests, as they will not be reviewed or actioned until further notice.



react beautiful dnd logo

react-beautiful-dnd (rbd)

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm

quote application example

Play with this example if you want!

Core characteristics

  • Beautiful and natural movement of items ๐Ÿ’
  • Accessible: powerful keyboard and screen reader support โ™ฟ๏ธ
  • Extremely performant ๐Ÿš€
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started ๐Ÿ‘ฉโ€๐Ÿซ

We have created a free course on egghead.io ๐Ÿฅš to help you get started with react-beautiful-dnd as quickly as possible.

course-logo

Currently supported feature set โœ…

  • Vertical lists โ†•
  • Horizontal lists โ†”
  • Movement between lists (โ–ค โ†” โ–ค)
  • Virtual list support ๐Ÿ‘พ - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse ๐Ÿญ, keyboard ๐ŸŽนโ™ฟ๏ธ and touch ๐Ÿ‘‰๐Ÿ“ฑ (mobile, tablet and so on) support
  • Multi drag support
  • 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 and conditional 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
  • Compatible with semantic <table> reordering - table pattern
  • Auto scrolling - 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 />
  • Create scripted drag and drop experiences ๐ŸŽฎ
  • Allows extensions to support for any input type you like ๐Ÿ•น
  • ๐ŸŒฒ Tree support through the @atlaskit/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()
  • Plays well with nested interactive elements 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:

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. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent 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 ๐Ÿ‘‹

Sensors ๐Ÿ”‰

The ways in which somebody can start and control a drag

API ๐Ÿ‹๏ธโ€

diagram

Guides ๐Ÿ—บ

Patterns ๐Ÿ‘ทโ€

Support ๐Ÿ‘ฉโ€โš•๏ธ

Read this in other languages ๐ŸŒŽ

Creator โœ๏ธ

Alex Reardon @alexandereardon

Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.

Maintainers

Collaborators ๐Ÿค

More Repositories

1

pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack
TypeScript
9,098
star
2

jest-in-case

Jest utility for creating variations of the same test
JavaScript
1,054
star
3

react-sweet-state

Shared state management solution for React
JavaScript
870
star
4

escalator

Escalator is a batch or job optimized horizontal autoscaler for Kubernetes
Go
647
star
5

github-for-jira

Connect your code with your project management in Jira
TypeScript
618
star
6

prosemirror-utils

โš’ Utils library for ProseMirror
TypeScript
466
star
7

nucleus

A configurable and versatile update server for all your Electron apps
TypeScript
390
star
8

docker-chromium-xvfb

Docker image for running browser tests against headless Chromium
Dockerfile
385
star
9

gostatsd

An implementation of Etsy's statsd in Go with tags support
Go
380
star
10

smith

Smith is a Kubernetes workflow engine / resource manager
Go
287
star
11

babel-plugin-react-flow-props-to-prop-types

Convert Flow React props annotation to PropTypes
JavaScript
234
star
12

better-ajv-errors

JSON Schema validation for Human ๐Ÿ‘จโ€๐ŸŽค
JavaScript
231
star
13

browser-interaction-time

โฐ A JavaScript library (written in TypeScript) to measure the time a user is active on a website
TypeScript
215
star
14

gajira

GitHub Actions for Jira
198
star
15

extract-react-types

One stop shop for documenting your react components.
JavaScript
178
star
16

stricter

A project-wide js-linting tool
TypeScript
157
star
17

data-center-helm-charts

Helm charts for Atlassian's Data Center products
Java
154
star
18

bazel-tools

Reusable bits for Bazel
Starlark
115
star
19

gajira-login

Jira Login GitHub Action
JavaScript
96
star
20

terraform-provider-artifactory

Terraform provider to manage Artifactory
Go
89
star
21

build-stats

๐Ÿ† get the build stats for pipelines ๐Ÿ†
TypeScript
81
star
22

kubetoken

Kubetoken
Go
74
star
23

dc-app-performance-toolkit

Atlassian Data Center App Performance Toolkit
Python
74
star
24

koa-oas3

Request and response validator for Koa using Open API Specification
TypeScript
72
star
25

1time

Lightweight, thread-safe Java/Kotlin TOTP (time-based one-time passwords) and HOTP generator and validator for multi-factor authentication valid for both prover and verifier based on shared secret
Kotlin
65
star
26

gajira-transition

JavaScript
58
star
27

sketch-plugin

Design your next Atlassian app with our component libraries and suite of Sketch tools ๐Ÿ’Ž
JavaScript
57
star
28

gajira-create

JavaScript
56
star
29

go-sentry-api

A go client for the sentry api https://sentry.io/api/
Go
50
star
30

themis

Autoscaling EMR clusters and Kinesis streams on Amazon Web Services (AWS)
JavaScript
48
star
31

gajira-todo

JavaScript
46
star
32

jira-cloud-for-sketch

A Sketch plugin providing integration with JIRA Cloud
JavaScript
45
star
33

gajira-find-issue-key

JavaScript
44
star
34

oas3-chow-chow

Request and response validator against OpenAPI Specification 3
TypeScript
42
star
35

validate-npm-package

Validate a package.json file
JavaScript
38
star
36

gajira-cli

JavaScript
38
star
37

conartist

Scaffold out and keep all your files in sync over time. Code-shifts for your file system.
JavaScript
34
star
38

gajira-comment

JavaScript
32
star
39

jira-github-connector-plugin

This project has been superseded by the JIRA DVCS Connector
JavaScript
30
star
40

voyager

Voyager PaaS
Go
29
star
41

atlaskit-framerx

[Unofficial] Atlaskit for Framer X (experimental)
TypeScript
28
star
42

jira-actions

Kotlin
26
star
43

sourcemap

Java
24
star
44

go-artifactory

Go library for artifactory REST API
Go
23
star
45

asap-authentication-python

This package provides a python implementation of the Atlassian Service to Service Authentication specification.
Python
22
star
46

vscode-extension-jira-frontend

JavaScript
18
star
47

ssh

Kotlin
16
star
48

homebrew-tap

This repository contains a collection of Homebrew (aka, Brew) "formulae" for Atlassian
Ruby
16
star
49

atlassian-connect-example-app-node

TypeScript
15
star
50

jira-performance-tests

Kotlin
15
star
51

docker-fluentd

Docker image for fluentd with support for both elasticsearch and kinesis
Makefile
11
star
52

infrastructure

Kotlin
11
star
53

omniauth-jira

OmniAuth strategy for JIRA
Ruby
11
star
54

jenkins-for-jira

Connect your Jenkins server to Jira Software Cloud for more visibility into your development pipeline
TypeScript
11
star
55

redis-dump-restore

Node.js library to dump and restore Redis.
JavaScript
10
star
56

fluent-plugin-kinesis-aggregation

fluent kinesis plugin shipping KPL aggregation format records, based on https://github.com/awslabs/aws-fluent-plugin-kinesis
Ruby
10
star
57

rocker

Little text UI for docker
Rust
9
star
58

hubot-stride

JavaScript
9
star
59

graphql-braid

9
star
60

copy-pkg

Copy a package.json with filters and normalization
JavaScript
8
star
61

gray-matter-loader

Webpack loader for extracting front-matter using gray-matter - https://www.npmjs.com/package/gray-matter
JavaScript
8
star
62

autoconvert

TinyMCE plugin for Atlassian Autoconvert
JavaScript
8
star
63

less-plugin-inline-svg

A Less plugin that allows to inline SVG file and customize its CSS styles
JavaScript
7
star
64

aws-infrastructure

Kotlin
7
star
65

jsm-integration-scripts

Jira Service Management Integration Scripts
Python
7
star
66

jira-hardware-exploration

Kotlin
6
star
67

report

HTML
6
star
68

virtual-users

Kotlin
6
star
69

docker-infrastructure

Kotlin
6
star
70

jobsite

Tools for working with workspaces as defined by Yarn, Lerna, Bolt, etc.
JavaScript
5
star
71

git-lob

Experimental large files in Git (discontinued, use git-lfs instead)
Go
5
star
72

ansible-ixgbevf

4
star
73

concurrency

Kotlin
4
star
74

jvm-tasks

Kotlin
4
star
75

ssh-ubuntu

Kotlin
4
star
76

jpt-example-btf

Java
3
star
77

gojiid

A Goji Middleware For adding Request Id to Context
Go
3
star
78

jira-software-actions

Kotlin
3
star
79

workspace

Kotlin
2
star
80

putty-sourcetree-fork

A fork of PuTTY used by Sourcetree
C
2
star
81

atlassian-connect-example-app-python

Python
2
star
82

atlassian-connect-example-app-java

Java
2
star
83

nadel-graphql-gateway-demo

Nadel GraphQL Gateway Demo app
HTML
1
star
84

parcel-stress-test

JavaScript
1
star
85

homebrew-bitbucket

A collection of pinned versions of dependencies for Bitbucket
Ruby
1
star
86

frontend-guides

1
star
87

tangerine-state-viewer

Visual Studio Code extension to facilitate tangerine state navigation
TypeScript
1
star
88

uniql-es

JavaScript
1
star
89

jasmine-http-server-spy

Creates jasmine spy objects backed by a http server.
CoffeeScript
1
star
90

packit-cli

CLI tool for creating package based architecture for enterprise frontend applications.
JavaScript
1
star
91

fluent-plugin-statsd_event

Fluentd plugin for sendind events to a statsd service
Ruby
1
star
92

github-packages-test

Test repo to verify artifact delivery pipeline
Kotlin
1
star
93

org.eclipse.jgit-atlassian

Java
1
star
94

jces-1209

Benchmark for Cloud and DC
Kotlin
1
star
95

webvieweventtest

TypeScript
1
star
96

quick-303

Cloud vs DC
Kotlin
1
star
97

jec

JEC Client source codes and installation packages
Go
1
star