Release 2.6.0 · atlassian/react-beautiful-dnd · GitHub

Drag and drop for mobile web📱with #reactjs just got a lot more beautiful🤘

  • We have really sweated the details to bring you a drag and drop experience that works out of the box which is initiative for users, respects standard touch interactions as much as possible, and looks amazing .
  • These are used to start and manage part of the touch interactions.
  • Styles are applied by default to s to facilitate a better touch device drag and drop experience.
  • 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.

react-beautiful-dnd – Beautiful, accessible drag and drop for lists with React.js

Some examples recorded from an iphone 6s.

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

This is the most requested feature of the library and it is really 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.

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 |}

s 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 &…

Release 2.6.0 · atlassian/react-beautiful-dnd · GitHub