github atlassian/react-beautiful-dnd v2.6.0

latest releases: v13.1.1, v13.1.0, v13.0.0...
6 years ago


Touch support! #11 📱👍

Mobile, tablet as well as other touch devices

Some examples recorded from an iphone 6s.

Mobile portrait Mobile landscape
Mobile portrait Mobile landscape

We have really sweated the details to bring you a drag and drop experience that works out of the box which is intuitive for users, respects standard browser touch interactions as much as possible, and looks amazing ✨.

This is the most requested feature of the library and it is exciting to see it ship!

If you are interested to read a bit more about the thinking that went into it you can read the docs as well as the discussions surroundings its creation.


Adding DragHandleProvided event handlers

These are used to start and manage part of the touch interactions.

type DragHandleProvided = {|
  onMouseDown: (event: MouseEvent) => void,
  onKeyDown: (event: KeyboardEvent) => void,
  onClick: (event: MouseEvent) => void,
+  onTouchStart: (event: TouchEvent) => void,
+  onTouchMove: (event: TouchEvent) => void,
  tabIndex: number,
  'aria-grabbed': boolean,
  draggable: boolean,
  onDragStart: () => void,
  onDrop: () => void


Styles are applied by default to Draggables to facilitate a better touch device drag and drop experience. Consumers can opt out of these styles or change them if they really need too for their specific use case.

type DraggableStyle = DraggingStyle | NotDraggingStyle

+type BaseStyle = {
+  // Disable standard long press action
+  WebkitTouchCallout: 'none',
+  // Disable grey overlay on active anchors
+  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+  // Avoid pull to refresh action and anchor focus on Android Chrome
+  touchAction: 'none',

+ type DraggingStyle = BaseStyle & {
  pointerEvents: 'none',
  position: 'fixed',
  width: number,
  height: number,
  boxSizing: 'border-box',
  top: number,
  left: number,
  margin: 0,
  transform: ?string,
  zIndex: ZIndex,
+ type NotDraggingStyle = BaseStyle & {
  transition: ?string,
  transform: ?string,
  pointerEvents: 'none' | 'auto',


  • Major refactor to drag handle logic to simply how different types of dragging is done as well as adding lots more test cases #165
  • Updating the readme with an updated example #168. Thanks @skroth!
  • Remove disclaimer for moving between droppables #160. Thanks @on3iro!
  • Adding keyboard patching example #152. Thanks @hql287!

Broader thanks

Getting dragging working on touch devices is no easy feat. The quality of this release would not have been possible without close examination of how others have already tackled this problem. In no particular order, a huge thank you to the following projects and those who work on them:

Don't miss a new react-beautiful-dnd release

NewReleases is sending notifications on new releases.