⚠️ Deprecated

Hey all,

We are taking the next step in saying thank you and goodbye to our friend react-beautiful-dnd.

  • 🔔 We will be soon deprecating react-beautiful-dnd on npm. When we do you will start to get console warnings in your build tools.
  • 🔒 On Apr 30, 2025 (six months from posting) we will archiving the react-beautiful-dnd Github repository (it will become read only).

Thank you everybody for your support of this project.

More information


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 🤝

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:1728947291.0",
        "canEdit": false,
        "refType": "branch",
        "currentOid": "b833d66c437b6a96c13591bcc9f7b3f4d2a6170e"
      },
      "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,
          "actionsMigrationBannerInfo": {
            "releaseTags": [],
            "showImmutableActionsMigrationBanner": false,
            "initialMigrationStatus": 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": "xcode://clone?repo=https%3A%2F%2Fgithub.com%2Fatlassian%2Freact-beautiful-dnd",
              "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": "820",
        "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> Deprecated</h2><a id=\"user-content-️-deprecated\" class=\"anchor\" aria-label=\"Permalink: ⚠️ Deprecated\" href=\"#️-deprecated\"><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\">Hey all,</p>\n<p dir=\"auto\">We are taking the next step in saying thank you and goodbye to our friend <code>react-beautiful-dnd</code>.</p>\n<ul dir=\"auto\">\n<li>🔔 We will be soon deprecating <code>react-beautiful-dnd</code> on <a href=\"https://www.npmjs.com/package/react-beautiful-dnd\" rel=\"nofollow\">npm</a>. When we do you will start to get console warnings in your build tools.</li>\n<li>🔒 On Apr 30, 2025 (six months from posting) we will <a href=\"https://docs.github.com/en/repositories/archiving-a-github-repository/archiving-repositories\">archiving</a> the <code>react-beautiful-dnd</code> Github repository (it will become read only).</li>\n</ul>\n<p dir=\"auto\">Thank you everybody for your support of this project.</p>\n<p dir=\"auto\"><a href=\"https://github.com/atlassian/react-beautiful-dnd/issues/2672\" data-hovercard-type=\"issue\" data-hovercard-url=\"/atlassian/react-beautiful-dnd/issues/2672/hovercard\">More information</a></p>\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/875fa09c5ef46433f5643480442c1dff1db84b58000881c359fad043b46a671d/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/af0ee434460025dffaa674e2b62e27b4b626a65ddd1d068ac95411a7ed9ad168/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.app/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": "⚠️ Deprecated",
                  "anchor": "️-deprecated",
                  "htmlText": "⚠️ Deprecated"
                },
                {
                  "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-f653046cb227.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,
        "blob_edit_unsaved_changes_storage": false,
        "accessible_code_button": true,
        "overview_branch_and_tag_count": true,
        "overview_spoofed_commit_banner_react": true
      }
    }
  }
}
{
  "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/ github.com/webpack/ github.com/assets/ 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 *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.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 api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.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 private-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/ github.com/webpack/ github.com/assets/ gist.github.com/assets-cdn/worker/",
  "content-type": "text/html; charset=utf-8",
  "date": "Fri, 18 Oct 2024 05:26:58 GMT",
  "etag": "6b8b26ebf9ecbf84adbaccfc317a6814",
  "referrer-policy": "no-referrer-when-downgrade",
  "server": "GitHub.com",
  "set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Sat, 18 Oct 2025 05:26:57 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": "9796:1FD5B6:248EA09:31E6B0E:6711F1A1",
  "x-xss-protection": "0"
}