Drag and drop with touch support for react.js Drag and drop with touch support for react.js reactjs reactjs

Drag and drop with touch support for react.js


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.


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