⚠️ 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.

Important

Update: 3rd April 2024

📺 Watch on Youtube
🗣️ Discussion

react-beautiful-dnd ^(rbd)

Beautiful and accessible drag and drop for lists with React

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.

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

Mouse dragging 🐭
Touch dragging 👉📱
Keyboard dragging 🎹♿️
Create your own sensor (allows for any input type as well as scripted experiences)

API 🏋️‍

<DragDropContext /> - Wraps the part of your application you want to have drag and drop enabled for
<Droppable /> - An area that can be dropped into. Contains <Draggable />s
<Draggable /> - What can be dragged around
resetServerContext() - Utility for server side rendering (SSR)

Guides 🗺

<DragDropContext /> responders - onDragStart, onDragUpdate, onDragEnd and onBeforeDragStart
Combining <Draggable />s
Common setup issues
Using innerRef
Setup problem detection and error recovery
Rules for draggableId and droppableIds
Browser focus retention
Customising or skipping the drop animation
Auto scrolling
Controlling the screen reader
Use the html5 doctype
TypeScript and flow: type information
Dragging <svg>s
Avoiding image flickering
Non-visible preset styles
How we detect scroll containers
How we use dom events - Useful if you need to build on top of react-beautiful-dnd
Adding <Draggable />s during a drag (11.x behaviour) - ⚠️ Advanced
Setting up Content Security Policy

Patterns 👷‍

Virtual lists 👾
Multi drag
Tables
Reparenting a <Draggable /> - Using our cloning API or your own portal

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

Daniel Del Core
Many other @Atlassian's!

Collaborators 🤝

Bogdan Chadkin @IAmTrySound

atlassian/react-beautiful-dnd

{
  "props": {
    "initialPayload": {
      "allShortcutsEnabled": false,
      "path": "/",
      "repo": {
        "id": 99761907,
        "defaultBranch": "master",
        "name": "react-beautiful-dnd",
        "ownerLogin": "atlassian",
        "currentUserCanPush": false,
        "isFork": false,
        "isEmpty": false,
        "createdAt": "2017-08-09T03:37:15.000Z",
        "ownerAvatar": "https://avatars.githubusercontent.com/u/168166?v=4",
        "public": true,
        "private": false,
        "isOrgOwned": true
      },
      "currentUser": null,
      "refInfo": {
        "name": "master",
        "listCacheKey": "v0:1717601638.0",
        "canEdit": false,
        "refType": "branch",
        "currentOid": "ae7bcf326928fea3615dfed092dd4261a3976e0d"
      },
      "tree": {
        "items": [
          {
            "name": ".circleci",
            "path": ".circleci",
            "contentType": "directory"
          },
          {
            "name": ".github/ISSUE_TEMPLATE",
            "path": ".github/ISSUE_TEMPLATE",
            "contentType": "directory",
            "hasSimplifiedPath": true
          },
          {
            "name": ".storybook",
            "path": ".storybook",
            "contentType": "directory"
          },
          {
            "name": "csp-server",
            "path": "csp-server",
            "contentType": "directory"
          },
          {
            "name": "cypress",
            "path": "cypress",
            "contentType": "directory"
          },
          {
            "name": "docs",
            "path": "docs",
            "contentType": "directory"
          },
          {
            "name": "flow-typed",
            "path": "flow-typed",
            "contentType": "directory"
          },
          {
            "name": "src",
            "path": "src",
            "contentType": "directory"
          },
          {
            "name": "stories",
            "path": "stories",
            "contentType": "directory"
          },
          {
            "name": "test-reports/lighthouse",
            "path": "test-reports/lighthouse",
            "contentType": "directory",
            "hasSimplifiedPath": true
          },
          {
            "name": "test",
            "path": "test",
            "contentType": "directory"
          },
          {
            "name": ".browserlistrc",
            "path": ".browserlistrc",
            "contentType": "file"
          },
          {
            "name": ".eslintignore",
            "path": ".eslintignore",
            "contentType": "file"
          },
          {
            "name": ".eslintrc.js",
            "path": ".eslintrc.js",
            "contentType": "file"
          },
          {
            "name": ".flowconfig",
            "path": ".flowconfig",
            "contentType": "file"
          },
          {
            "name": ".gitignore",
            "path": ".gitignore",
            "contentType": "file"
          },
          {
            "name": ".nvmrc",
            "path": ".nvmrc",
            "contentType": "file"
          },
          {
            "name": ".prettierignore",
            "path": ".prettierignore",
            "contentType": "file"
          },
          {
            "name": ".prettierrc",
            "path": ".prettierrc",
            "contentType": "file"
          },
          {
            "name": ".size-snapshot.json",
            "path": ".size-snapshot.json",
            "contentType": "file"
          },
          {
            "name": ".stylelintrc.json",
            "path": ".stylelintrc.json",
            "contentType": "file"
          },
          {
            "name": "CHANGELOG.md",
            "path": "CHANGELOG.md",
            "contentType": "file"
          },
          {
            "name": "CODE_OF_CONDUCT.md",
            "path": "CODE_OF_CONDUCT.md",
            "contentType": "file"
          },
          {
            "name": "CONTRIBUTING.md",
            "path": "CONTRIBUTING.md",
            "contentType": "file"
          },
          {
            "name": "LICENSE",
            "path": "LICENSE",
            "contentType": "file"
          },
          {
            "name": "README.md",
            "path": "README.md",
            "contentType": "file"
          },
          {
            "name": "a11y-audit-parse.js",
            "path": "a11y-audit-parse.js",
            "contentType": "file"
          },
          {
            "name": "babel.config.js",
            "path": "babel.config.js",
            "contentType": "file"
          },
          {
            "name": "browser-test-harness.js",
            "path": "browser-test-harness.js",
            "contentType": "file"
          },
          {
            "name": "cypress.json",
            "path": "cypress.json",
            "contentType": "file"
          },
          {
            "name": "jest.config.js",
            "path": "jest.config.js",
            "contentType": "file"
          },
          {
            "name": "package.json",
            "path": "package.json",
            "contentType": "file"
          },
          {
            "name": "renovate.json",
            "path": "renovate.json",
            "contentType": "file"
          },
          {
            "name": "rollup.config.js",
            "path": "rollup.config.js",
            "contentType": "file"
          },
          {
            "name": "server-ports.js",
            "path": "server-ports.js",
            "contentType": "file"
          },
          {
            "name": "yarn.lock",
            "path": "yarn.lock",
            "contentType": "file"
          }
        ],
        "templateDirectorySuggestionUrl": null,
        "readme": null,
        "totalCount": 36,
        "showBranchInfobar": false
      },
      "fileTree": null,
      "fileTreeProcessingTime": null,
      "foldersToFetch": [],
      "treeExpanded": false,
      "symbolsExpanded": false,
      "isOverview": true,
      "overview": {
        "banners": {
          "shouldRecommendReadme": false,
          "isPersonalRepo": false,
          "showUseActionBanner": false,
          "actionSlug": null,
          "actionId": null,
          "showProtectBranchBanner": false,
          "publishBannersInfo": {
            "dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
            "releasePath": "/atlassian/react-beautiful-dnd/releases/new?marketplace=true",
            "showPublishActionBanner": false
          },
          "interactionLimitBanner": null,
          "showInvitationBanner": false,
          "inviterName": null
        },
        "codeButton": {
          "contactPath": "/contact",
          "isEnterprise": false,
          "local": {
            "protocolInfo": {
              "httpAvailable": true,
              "sshAvailable": null,
              "httpUrl": "https://github.com/atlassian/react-beautiful-dnd.git",
              "showCloneWarning": null,
              "sshUrl": null,
              "sshCertificatesRequired": null,
              "sshCertificatesAvailable": null,
              "ghCliUrl": "gh repo clone atlassian/react-beautiful-dnd",
              "defaultProtocol": "http",
              "newSshKeyUrl": "/settings/ssh/new",
              "setProtocolPath": "/users/set_protocol"
            },
            "platformInfo": {
              "cloneUrl": "https://desktop.github.com",
              "showVisualStudioCloneButton": false,
              "visualStudioCloneUrl": "https://windows.github.com",
              "showXcodeCloneButton": false,
              "xcodeCloneUrl": "https://developer.apple.com",
              "zipballUrl": "/atlassian/react-beautiful-dnd/archive/refs/heads/master.zip"
            }
          },
          "newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=99761907"
        },
        "popovers": {
          "rename": null,
          "renamedParentRepo": null
        },
        "commitCount": "814",
        "overviewFiles": [
          {
            "displayName": "README.md",
            "repoName": "react-beautiful-dnd",
            "refName": "master",
            "path": "README.md",
            "preferredFileType": "readme",
            "tabName": "README",
            "richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><g-emoji class=\"g-emoji\" alias=\"warning\">⚠️</g-emoji> Maintenance &amp; support</h2><a id=\"user-content-️-maintenance--support\" class=\"anchor\" aria-label=\"Permalink: ⚠️ Maintenance &amp; support\" href=\"#️-maintenance--support\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">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.</p>\n<p dir=\"auto\">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.</p>\n<p dir=\"auto\">We recommend that you don’t raise issues or pull requests, as they will not be reviewed or actioned until further notice.</p>\n<div class=\"markdown-alert markdown-alert-important\" dir=\"auto\"><p class=\"markdown-alert-title\" dir=\"auto\"><svg class=\"octicon octicon-report mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path></svg>Important</p>\n<p dir=\"auto\"><strong>Update: 3rd April 2024</strong></p>\n<p dir=\"auto\"><a href=\"https://www.youtube.com/watch?v=uySl2yiUYE4\" rel=\"nofollow\"><img src=\"https://github.com/alexreardon/files/assets/2182637/bb7740a3-875c-49aa-be54-e7268d836d60\" width=\"300px\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\"><a href=\"https://www.youtube.com/watch?v=uySl2yiUYE4\" rel=\"nofollow\">📺 Watch on Youtube</a> <br> <a href=\"https://github.com/atlassian/react-beautiful-dnd/issues/2573\" data-hovercard-type=\"issue\" data-hovercard-url=\"/atlassian/react-beautiful-dnd/issues/2573/hovercard\">🗣️ Discussion</a></p>\n</div>\n<br>\n<hr>\n<p align=\"center\" dir=\"auto\">\n  <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png\"><img src=\"https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png\" alt=\"react beautiful dnd logo\" style=\"max-width: 100%;\"></a>\n</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h1 align=\"center\" tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">react-beautiful-dnd <sup>(rbd)</sup></h1><a id=\"user-content-react-beautiful-dnd-rbd\" class=\"anchor\" aria-label=\"Permalink: react-beautiful-dnd \" href=\"#react-beautiful-dnd-rbd\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div align=\"center\" dir=\"auto\">\n<p dir=\"auto\"><strong>Beautiful</strong> and <strong>accessible</strong> drag and drop for lists with <a href=\"https://facebook.github.io/react/\" rel=\"nofollow\"><code>React</code></a></p>\n<p dir=\"auto\"><a href=\"https://circleci.com/gh/atlassian/react-beautiful-dnd/tree/master\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a5c4c2c4aae71752d6de652d16a636871a9b1b1f98f5c04ed9de64335c44eb0f/68747470733a2f2f696d672e736869656c64732e696f2f636972636c6563692f70726f6a6563742f6769746875622f61746c61737369616e2f72656163742d62656175746966756c2d646e642f6d61737465722e737667\" alt=\"CircleCI branch\" data-canonical-src=\"https://img.shields.io/circleci/project/github/atlassian/react-beautiful-dnd/master.svg\" style=\"max-width: 100%;\"></a>\n<a href=\"https://www.npmjs.com/package/react-beautiful-dnd\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/fb7f562686c30dfbb0a51982a8f7b117b2e067ecdac82aab89dc8f7e474355cf/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d62656175746966756c2d646e642e737667\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/react-beautiful-dnd.svg\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif\"><img src=\"https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif\" alt=\"quote application example\" data-animated-image=\"\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\"><a href=\"https://react-beautiful-dnd.netlify.com/iframe.html?selectedKind=board&amp;selectedStory=simple\" rel=\"nofollow\">Play with this example if you want!</a></p>\n</div>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Core characteristics</h2><a id=\"user-content-core-characteristics\" class=\"anchor\" aria-label=\"Permalink: Core characteristics\" href=\"#core-characteristics\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li>Beautiful and <a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/animations.md\">natural movement</a> of items 💐</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/accessibility.md\">Accessible</a>: powerful keyboard and screen reader support ♿️</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/support/media.md\">Extremely performant</a> 🚀</li>\n<li>Clean and powerful api which is simple to get started with</li>\n<li>Plays extremely well with standard browser interactions</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/preset-styles.md\">Unopinionated styling</a></li>\n<li>No creation of additional wrapper dom nodes - flexbox and focus management friendly!</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Get started 👩‍🏫</h2><a id=\"user-content-get-started-\" class=\"anchor\" aria-label=\"Permalink: Get started 👩‍🏫\" href=\"#get-started-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">We have created <a href=\"https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd\" rel=\"nofollow\">a free course on <code>egghead.io</code> 🥚</a> to help you get started with <code>react-beautiful-dnd</code> as quickly as possible.</p>\n<p dir=\"auto\"><a href=\"https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd\" rel=\"nofollow\"><img src=\"https://user-images.githubusercontent.com/2182637/43372837-8c72d3f8-93e8-11e8-9d92-a82adde7718f.png\" alt=\"course-logo\" style=\"max-width: 100%;\"></a></p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Currently supported feature set ✅</h2><a id=\"user-content-currently-supported-feature-set-\" class=\"anchor\" aria-label=\"Permalink: Currently supported feature set ✅\" href=\"#currently-supported-feature-set-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li>Vertical lists ↕</li>\n<li>Horizontal lists ↔</li>\n<li>Movement between lists (▤ ↔ ▤)</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/patterns/virtual-lists.md\">Virtual list support 👾</a> - unlocking 10,000 items @ 60fps</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/combining.md\">Combining items</a></li>\n<li>Mouse 🐭, keyboard 🎹♿️ and touch 👉📱 (mobile, tablet and so on) support</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/patterns/multi-drag.md\">Multi drag support</a></li>\n<li>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 💖</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#optional-props\">Conditional dragging</a> and <a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#conditionally-dropping\">conditional dropping</a></li>\n<li>Multiple independent lists on the one page</li>\n<li>Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)</li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/changes-while-dragging.md\">Add and remove items during a drag</a></li>\n<li>Compatible with semantic <code>&lt;table&gt;</code> reordering - <a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/patterns/tables.md\">table pattern</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/auto-scrolling.md\">Auto scrolling</a> - automatically scroll containers and the window as required during a drag (even with keyboard 🔥)</li>\n<li>Custom drag handles - you can drag a whole item by just a part of it</li>\n<li>Able to move the dragging item to another element while dragging (clone, portal) - <a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md\">Reparenting your <code>&lt;Draggable /&gt;</code></a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/sensors/sensor-api.md\">Create scripted drag and drop experiences 🎮</a></li>\n<li>Allows extensions to support for <a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/sensors/sensor-api.md\">any input type you like 🕹</a></li>\n<li>🌲 Tree support through the <a href=\"https://atlaskit.atlassian.com/packages/confluence/tree\" rel=\"nofollow\"><code>@atlaskit/tree</code></a> package</li>\n<li>A <code>&lt;Droppable /&gt;</code> 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)</li>\n<li>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</li>\n<li>Server side rendering (SSR) compatible - see <a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/reset-server-context.md\">resetServerContext()</a></li>\n<li>Plays well with <a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#interactive-child-elements-within-a-draggable-\">nested interactive elements</a> by default</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Motivation 🤔</h2><a id=\"user-content-motivation-\" class=\"anchor\" aria-label=\"Permalink: Motivation 🤔\" href=\"#motivation-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\"><code>react-beautiful-dnd</code> 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:</p>\n<ul dir=\"auto\">\n<li>📖 <a href=\"https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b\" rel=\"nofollow\">Rethinking drag and drop</a></li>\n<li>🎧 <a href=\"https://reactpodcast.simplecast.fm/17\" rel=\"nofollow\">React podcast: fast, accessible and beautiful drag and drop</a></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Not for everyone ✌️</h2><a id=\"user-content-not-for-everyone-️\" class=\"anchor\" aria-label=\"Permalink: Not for everyone ✌️\" href=\"#not-for-everyone-️\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing <a href=\"https://github.com/react-dnd/react-dnd\"><code>react-dnd</code></a>. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the <a href=\"https://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html\" rel=\"nofollow\">wildly inconsistent</a> html5 drag and drop feature. <code>react-beautiful-dnd</code> is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality <code>react-beautiful-dnd</code> offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by <code>react-dnd</code>. So <code>react-beautiful-dnd</code> might not be for you depending on what your use case is.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Documentation 📖</h2><a id=\"user-content-documentation-\" class=\"anchor\" aria-label=\"Permalink: Documentation 📖\" href=\"#documentation-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">About 👋</h3><a id=\"user-content-about-\" class=\"anchor\" aria-label=\"Permalink: About 👋\" href=\"#about-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/installation.md\">Installation</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/examples.md\">Examples and samples</a></li>\n<li><a href=\"https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd\" rel=\"nofollow\">Get started</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/design-principles.md\">Design principles</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/animations.md\">Animations</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/accessibility.md\">Accessibility</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/about/browser-support.md\">Browser support</a></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Sensors 🔉</h3><a id=\"user-content-sensors-\" class=\"anchor\" aria-label=\"Permalink: Sensors 🔉\" href=\"#sensors-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<blockquote>\n<p dir=\"auto\">The ways in which somebody can start and control a drag</p>\n</blockquote>\n<ul dir=\"auto\">\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/sensors/mouse.md\">Mouse dragging 🐭</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/sensors/touch.md\">Touch dragging 👉📱</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/sensors/keyboard.md\">Keyboard dragging 🎹♿️</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/sensors/sensor-api.md\">Create your own sensor</a> (allows for any input type as well as scripted experiences)</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">API 🏋️‍</h3><a id=\"user-content-api-️\" class=\"anchor\" aria-label=\"Permalink: API 🏋️‍\" href=\"#api-️\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://user-images.githubusercontent.com/2182637/53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif\"><img src=\"https://user-images.githubusercontent.com/2182637/53607406-c8f3a780-3c12-11e9-979c-7f3b5bd1bfbd.gif\" alt=\"diagram\" data-animated-image=\"\" style=\"max-width: 100%;\"></a></p>\n<ul dir=\"auto\">\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/drag-drop-context.md\"><code>&lt;DragDropContext /&gt;</code></a> - <em>Wraps the part of your application you want to have drag and drop enabled for</em></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md\"><code>&lt;Droppable /&gt;</code></a> - <em>An area that can be dropped into. Contains <code>&lt;Draggable /&gt;</code>s</em></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md\"><code>&lt;Draggable /&gt;</code></a> - <em>What can be dragged around</em></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/api/reset-server-context.md\"><code>resetServerContext()</code></a> - <em>Utility for server side rendering (SSR)</em></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Guides 🗺</h3><a id=\"user-content-guides-\" class=\"anchor\" aria-label=\"Permalink: Guides 🗺\" href=\"#guides-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/responders.md\"><code>&lt;DragDropContext /&gt;</code> responders</a> - <em><code>onDragStart</code>, <code>onDragUpdate</code>, <code>onDragEnd</code> and <code>onBeforeDragStart</code></em></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/combining.md\">Combining <code>&lt;Draggable /&gt;</code>s</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/common-setup-issues.md\">Common setup issues</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md\">Using <code>innerRef</code></a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/setup-problem-detection-and-error-recovery.md\">Setup problem detection and error recovery</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/identifiers.md\">Rules for <code>draggableId</code> and <code>droppableId</code>s</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/browser-focus.md\">Browser focus retention</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md\">Customising or skipping the drop animation</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/auto-scrolling.md\">Auto scrolling</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/screen-reader.md\">Controlling the screen reader</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/doctype.md\">Use the html5 <code>doctype</code></a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/types.md\"><code>TypeScript</code> and <code>flow</code>: type information</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/dragging-svgs.md\">Dragging <code>&lt;svg&gt;</code>s</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/avoiding-image-flickering.md\">Avoiding image flickering</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/preset-styles.md\">Non-visible preset styles</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-detect-scroll-containers.md\">How we detect scroll containers</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md\">How we use dom events</a> - <em>Useful if you need to build on top of <code>react-beautiful-dnd</code></em></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/changes-while-dragging.md\">Adding <code>&lt;Draggable /&gt;</code>s during a drag (11.x behaviour)</a> - <em><g-emoji class=\"g-emoji\" alias=\"warning\">⚠️</g-emoji> Advanced</em></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/content-security-policy.md\">Setting up Content Security Policy</a></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Patterns 👷‍</h3><a id=\"user-content-patterns-\" class=\"anchor\" aria-label=\"Permalink: Patterns 👷‍\" href=\"#patterns-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/patterns/virtual-lists.md\">Virtual lists 👾</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/patterns/multi-drag.md\">Multi drag</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/patterns/tables.md\">Tables</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md\">Reparenting a <code>&lt;Draggable /&gt;</code></a> - <em>Using our cloning API or your own portal</em></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Support 👩‍⚕️</h3><a id=\"user-content-support-️\" class=\"anchor\" aria-label=\"Permalink: Support 👩‍⚕️\" href=\"#support-️\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/support/engineering-health.md\">Engineering health</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/support/community-and-addons.md\">Community and addons</a></li>\n<li><a href=\"https://github.com/atlassian/react-beautiful-dnd/releases\">Release notes and changelog</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/support/upgrading.md\">Upgrading</a></li>\n<li><a href=\"https://github.com/atlassian/react-beautiful-dnd/issues\">Road map</a></li>\n<li><a href=\"/atlassian/react-beautiful-dnd/blob/master/docs/support/media.md\">Media</a></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Read this in other languages 🌎</h2><a id=\"user-content-read-this-in-other-languages-\" class=\"anchor\" aria-label=\"Permalink: Read this in other languages 🌎\" href=\"#read-this-in-other-languages-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li><a href=\"https://github.com/LeeHyungGeun/react-beautiful-dnd-kr\"><img src=\"https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png\" alt=\"kr\" style=\"max-width: 100%;\"> <strong>한글/Korean</strong></a></li>\n<li><a href=\"https://github.com/vtereshyn/react-beautiful-dnd-ru\"><img src=\"https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png\" alt=\"ru\" style=\"max-width: 100%;\"> <strong>На русском/Russian</strong></a></li>\n<li><a href=\"https://github.com/dudestein/react-beautiful-dnd-pt\"><img src=\"https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png\" alt=\"pt\" style=\"max-width: 100%;\"> <strong>Português/Portuguese</strong></a></li>\n<li><a href=\"https://github.com/milvard/react-beautiful-dnd-gr\"><img src=\"https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Greece.png\" alt=\"gr\" style=\"max-width: 100%;\"> <strong>Ελληνικά/Greek</strong></a></li>\n<li><a href=\"https://github.com/eltociear/react-beautiful-dnd-ja\"><img src=\"https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png\" alt=\"ja\" style=\"max-width: 100%;\"> <strong>日本語/Japanese</strong></a></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Creator ✍️</h2><a id=\"user-content-creator-️\" class=\"anchor\" aria-label=\"Permalink: Creator ✍️\" href=\"#creator-️\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Alex Reardon <a href=\"https://twitter.com/alexandereardon\" rel=\"nofollow\">@alexandereardon</a></p>\n<blockquote>\n<p dir=\"auto\">Alex is no longer personally maintaning this project. The other wonderful maintainers are carrying this project forward.</p>\n</blockquote>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Maintainers</h2><a id=\"user-content-maintainers\" class=\"anchor\" aria-label=\"Permalink: Maintainers\" href=\"#maintainers\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li><a href=\"https://twitter.com/danieldelcore\" rel=\"nofollow\">Daniel Del Core</a></li>\n<li>Many other <a href=\"https://twitter.com/Atlassian\" rel=\"nofollow\">@Atlassian</a>'s!</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Collaborators 🤝</h2><a id=\"user-content-collaborators-\" class=\"anchor\" aria-label=\"Permalink: Collaborators 🤝\" href=\"#collaborators-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li>Bogdan Chadkin <a href=\"https://twitter.com/IAmTrySound\" rel=\"nofollow\">@IAmTrySound</a></li>\n</ul>\n</article>",
            "loaded": true,
            "timedOut": false,
            "errorMessage": null,
            "headerInfo": {
              "toc": [
                {
                  "level": 2,
                  "text": "⚠️ Maintenance & support",
                  "anchor": "️-maintenance--support",
                  "htmlText": "⚠️ Maintenance &amp; support"
                },
                {
                  "level": 1,
                  "text": "react-beautiful-dnd ",
                  "anchor": "react-beautiful-dnd-rbd",
                  "htmlText": "react-beautiful-dnd "
                },
                {
                  "level": 2,
                  "text": "Core characteristics",
                  "anchor": "core-characteristics",
                  "htmlText": "Core characteristics"
                },
                {
                  "level": 2,
                  "text": "Get started 👩‍🏫",
                  "anchor": "get-started-",
                  "htmlText": "Get started 👩‍🏫"
                },
                {
                  "level": 2,
                  "text": "Currently supported feature set ✅",
                  "anchor": "currently-supported-feature-set-",
                  "htmlText": "Currently supported feature set ✅"
                },
                {
                  "level": 2,
                  "text": "Motivation 🤔",
                  "anchor": "motivation-",
                  "htmlText": "Motivation 🤔"
                },
                {
                  "level": 2,
                  "text": "Not for everyone ✌️",
                  "anchor": "not-for-everyone-️",
                  "htmlText": "Not for everyone ✌️"
                },
                {
                  "level": 2,
                  "text": "Documentation 📖",
                  "anchor": "documentation-",
                  "htmlText": "Documentation 📖"
                },
                {
                  "level": 3,
                  "text": "About 👋",
                  "anchor": "about-",
                  "htmlText": "About 👋"
                },
                {
                  "level": 3,
                  "text": "Sensors 🔉",
                  "anchor": "sensors-",
                  "htmlText": "Sensors 🔉"
                },
                {
                  "level": 3,
                  "text": "API 🏋️‍",
                  "anchor": "api-️",
                  "htmlText": "API 🏋️‍"
                },
                {
                  "level": 3,
                  "text": "Guides 🗺",
                  "anchor": "guides-",
                  "htmlText": "Guides 🗺"
                },
                {
                  "level": 3,
                  "text": "Patterns 👷‍",
                  "anchor": "patterns-",
                  "htmlText": "Patterns 👷‍"
                },
                {
                  "level": 3,
                  "text": "Support 👩‍⚕️",
                  "anchor": "support-️",
                  "htmlText": "Support 👩‍⚕️"
                },
                {
                  "level": 2,
                  "text": "Read this in other languages 🌎",
                  "anchor": "read-this-in-other-languages-",
                  "htmlText": "Read this in other languages 🌎"
                },
                {
                  "level": 2,
                  "text": "Creator ✍️",
                  "anchor": "creator-️",
                  "htmlText": "Creator ✍️"
                },
                {
                  "level": 2,
                  "text": "Maintainers",
                  "anchor": "maintainers",
                  "htmlText": "Maintainers"
                },
                {
                  "level": 2,
                  "text": "Collaborators 🤝",
                  "anchor": "collaborators-",
                  "htmlText": "Collaborators 🤝"
                }
              ],
              "siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fatlassian%2Freact-beautiful-dnd"
            }
          },
          {
            "displayName": "CODE_OF_CONDUCT.md",
            "repoName": "react-beautiful-dnd",
            "refName": "master",
            "path": "CODE_OF_CONDUCT.md",
            "preferredFileType": "code_of_conduct",
            "tabName": "Code of conduct",
            "richText": null,
            "loaded": false,
            "timedOut": false,
            "errorMessage": null,
            "headerInfo": {
              "toc": null,
              "siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fatlassian%2Freact-beautiful-dnd"
            }
          },
          {
            "displayName": "LICENSE",
            "repoName": "react-beautiful-dnd",
            "refName": "master",
            "path": "LICENSE",
            "preferredFileType": "license",
            "tabName": "License",
            "richText": null,
            "loaded": false,
            "timedOut": false,
            "errorMessage": null,
            "headerInfo": {
              "toc": null,
              "siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fatlassian%2Freact-beautiful-dnd"
            }
          }
        ],
        "overviewFilesProcessingTime": 0
      }
    },
    "appPayload": {
      "helpUrl": "https://docs.github.com",
      "findFileWorkerPath": "/assets-cdn/worker/find-file-worker-1583894afd38.js",
      "findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-3a63a487027b.js",
      "githubDevUrl": null,
      "enabled_features": {
        "code_nav_ui_events": false,
        "overview_shared_code_dropdown_button": false,
        "react_blob_overlay": false,
        "copilot_conversational_ux_embedding_update": false,
        "copilot_smell_icebreaker_ux": true,
        "copilot_workspace": false
      }
    }
  }
}

{
  "accept-ranges": "bytes",
  "cache-control": "max-age=0, private, must-revalidate",
  "content-encoding": "gzip",
  "content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com/v1/engines/github-completion/completions proxy.enterprise.githubcopilot.com/v1/engines/github-completion/completions *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
  "content-type": "text/html; charset=utf-8",
  "date": "Sat, 27 Jul 2024 04:23:28 GMT",
  "etag": "72dad06f505e0bd127645497ae8bc5ac",
  "referrer-policy": "no-referrer-when-downgrade",
  "server": "GitHub.com",
  "set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Sun, 27 Jul 2025 04:23:27 GMT; HttpOnly; Secure; SameSite=Lax",
  "strict-transport-security": "max-age=31536000; includeSubdomains; preload",
  "transfer-encoding": "chunked",
  "vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
  "x-content-type-options": "nosniff",
  "x-frame-options": "deny",
  "x-github-request-id": "B466:3A11D1:237A0F4:2F63770:66A4763F",
  "x-xss-protection": "0"
}