Original author: Alex Reardon

We’re going to talk about something basic today, but beautiful.

Let’s start with react-beautiful-DND

Drag and drop is an intuitive way to move and rearrange. We’ve launched React-beautiful-DND on Atlassian’s official repository, which makes dragging and dropping forms across web pages look beautiful, natural, and easy.

It’s more physical

The core design idea of React-beauty-DND is “physicality”. We want users to feel like they’re moving objects around them when they drag and drop. Comparison is the best way to illustrate — let’s talk about some standard drag-and-drop behavior and how we can do it better.

jquery-sortable

This example uses jquery-sorTable, which is great. Its drag-and-drop mechanism is fairly standard and a good reference point.

mobile

Real-time movement is the standard

When you drag an element, other elements disappear and reappear as needed. And when you drop an element, it immediately appears in its new location.

A more natural way to move

During drag and drop we animate the elements that need to be moved out of their original position so that = shows the drag more clearly, which is a more natural way to move. We also animated the element’s drop so that it can be animated when moving to a new location. The movement of an element should not be instantaneous at any time.

Know when to move

Drag-and-drop interactions are obvious based on where the user starts to trigger the drag.

Movement based on choice points

In the example above, the user holds down the upper right corner of the first element. Before the second element can be moved to the new location, the user needs to drag and drop down properly, because the calculation is based on the location the user originally selected.

Based on the movement of the center of gravity

In react-beautiful-DND, the effect of dragging elements on other elements is based on the center of gravity, regardless of where the user clicks to start dragging. The effects of dragging elements on other elements follow a similar set of rules. Here are some rules to follow that take into account some of the lessons of natural dragging, and even consider the height of element flexibility.

  • A list is the state of being dragged, when the center point of the element being dragged passes the edge of the list.

  • When the center position of the dragging element crosses the edge of the static element, the static element moves out of the path of the dragging element. In other words: As soon as the central position of one element A crosses the edge of another element B, B leaves.

Ease of use

Traditional drag-and-drop interactions are entirely mouse or touch interactions. React-beautiful-dnd supports a keyboard that allows all parties to drag and drop interactions. This allows some high-end users to use their keyboard experience as much as they want, and to open it up to previously excluded users.

Respect the browser

In addition to keyboard support, we also examined how keyboard shortcuts interact with standard browser keyboards. When the user does not drag and drop elements, they can use the keyboard as usual. When dragging, we override and disable certain browser keyboard shortcuts (such as the “TAB” key) to ensure a smooth user experience.

Detailed animation design

It’s easy to get distracted by these animations because the elements are moving around. We’ve tweaked the various animations to ensure the right balance of prompts, performance, and interactivity.

Maximize interactivity

React-beautiful-dnd goes to great pains to avoid non-interactivity in many places. Users should feel like they are in control of the interface, not waiting for the animation to finish before they can continue interacting with the interface.

To place (dropping)

When you place a drag element, it behaves physically (thanks to React-Motion).

Remove from the path

Elements are removed from the element path that is being dragged using CSS animations rather than physical changes to maximize performance by allowing the GPU to handle motion. CSS animation curves are designed to calculate the removal of non-drag elements from the movement path of the dragging element.

The animation looks like this:

  1. A warm-up period mimics the natural response time

  2. A small phase can be quickly removed from the path

  3. A long closing animation so that people can read whatever text is being animated in the second half of the animation.

Use animated curves when moving out of paths

The others are well thought out

We’ve done a lot of work to make sure we work intuitively while providing flexibility.

Slow click and click block

When a user clicks on an element, there is no way to determine whether the user is clicking or dragging. Also, sometimes users can move the cursor very gently when they click — this is called slow clicking. Therefore, we don’t start dragging events until the mouse is pressed down and moved a certain distance (drag threshold), rather than the user just moving the mouse at the beginning, which might be a slow click. If the drag does not exceed the threshold, the user’s interaction is treated as an ordinary click. If a drag exceeds the threshold, the interaction is treated as a drag and the standard click event does not occur.

This allows the user to wrap interaction elements, such as anchor points, so that it is not only a standard anchor point, but also a draggable element.

The focus of management

React-beautiful-dnd also goes to great pains to ensure that normal TAB document flow is not affected. For example, if you wrap an anchor tag, then the user will still be able to TAB to the anchor, not to the element that wraps the anchor. We added a TAB index to the drag element to ensure that users can still drag it through the keyboard without wrapping it around a common interactive thing like “div.”

Not everyone can use it

There are a number of React drag-and-drop libraries out there, the most notable of which is the excellent React-DND. It provides a very good set of drag-and-drop atoms, especially in conjunction with the wildly Inconsistent HTML5 drag-and-drop feature, which works incredibly well. React-beautiful-dnd is a high-level abstraction built for vertical and horizontal lists. In a subset of features, React-beautiful-DND offers a powerful, natural and beautiful drag-and-drop experience. However, it doesn’t offer as many features as React-DND does. So this library may not be right for you, depending on what your use case is.

engineering

Clean, powerful API

A declarative, clean, powerful API was expected long before the library was released. It should be easy to get started and provide the right level of control throughout the drag-and-drop experience. It is based on extensive research into other libraries and extensive expertise in building drag-and-drop products.

performance

React-beautiful-dnd is designed to be very efficient, it’s in its DNA. It builds on a prior survey of React performance, which you can read in this and another article. It is designed to perform each task with the minimum number of renders required.

The highlighted

  • Use connected components with memory to ensure that only components that need to be rendered are rendered, thanks to React-Redux, ResELECT, and Memoize-One.
  • All drag actions are intercepted by requestAnimationFrame, thanks to Raf-schd.
  • Memory is widely used, thanks to Memoize-One
  • Conditionally disallow mouse events for all other drag-and-drop elements while drag-and-drop is in progress, thus preventing the browser from doing nothing. You can read this technical article to learn more.

  • Non-major animations are done on the GPU

The fewest React updates

Minimal browser drawing

testable

React-beautiful-dnd uses a number of different testing strategies, including unit testing, integration testing, and performance testing. Testing all aspects of the system helps improve the quality and stability of the system.

Code coverage does not guarantee code health, which is a good indicator. The code base currently has at least 95% coverage.

The typed

This code uses the FlowType type checker for typing, which promotes greater internal consistency and more resilient code. It also provides a larger developer documentation story because the entire API is typed.

The last word

We felt the Web would bea much more beautiful and easy place to be because of react-beautiful-DND. For more information and examples visit our repository.

Thank you so much to everyone at Atlassian for making this possible.

Long live!

Update # 1

Support for React-beautiful-DND is already overwhelming! Thank you very much. We have a lot of new features in place, such as horizontal drag and drop.

Horizontal dragging

There are already a lot of people looking to provide support for Touch (which requires react-beautiuly-DND to work on mobile devices and tablets). This requirement is already in our plans, and we’re going to do it right now! The library is still very young!

Thanks to Daniel Kerris.