Drag and drop with touch support for react.js

Question

How to implement drag and drop for Facebooks' react.js with support for touch events?

There's a couple of questions and articles and libraries about drag and drop for react.js, but none of them seems to mention touch events, and none of the demo's work on my phone.

In general I wonder what would be the easiest: Try to implement this using existing d&d libraries which already support touch, but may need some work to properly work together with react. Or try to use any of the react d&d examples and make them work with touch (which, seeing this issue, may not be trivial?)

Answer 1

react-motion (with touch events)

We have tried "react-motion" for dragging items in a list. With more than 15-20 items it becomes really laggy. (But with small list it works good, like in this demo). Be aware that mobile devices are much slower than desktops.

Important note about react-motion: Don't forget to use production mode when testing your animation's performance!

react-dnd (with touch events)

The second option was "react-dnd". It is a great library. It is low level, however, it is rather easy to understand how to work with it. But at first, "react-dnd" was not an option for us because of no touch events support.

Later, when Yahoo had released react-dnd-touch-backend we decided to switch our app from "react-motion" to "react-dnd". This solved all our performance issues. We have list 50-70 items and it just works as expected.

Yahoo has done really good work and the solution works in our production apps.

Answer 2

You already mentioned react-dnd and I make PR that enable dnd for touch devices so you can try it