react-dnd-touch-backend
Touch Backend for react-dnd.
Live Demo
Touch Backend for react-dnd
Usage
Follow react-dnd docs to setup your app. Then swap out HTML5Backend for TouchBackend as such:
import { default as TouchBackend } from 'react-dnd-touch-backend';
import { DragDropContext } from 'react-dnd';
var YourApp = React.createClass(
/* ... */
);
module.exports = DragDropContext(TouchBackend)(YourApp);
Tips
Drag Preview
Since native Drag-n-Drop is not currently supported in touch devices. A custom DragPreview is required. Check out the example for a sample implementation.
We might try to build it directly in the Backend itself in the future to compensate for this limitation.
Mouse events support*
You can enable capturing mouse events by configuring your TouchBackend as follows:
DragDropContext(TouchBackend({ enableMouseEvents: true }));
NOTE: This is buggy due to the difference in touchstart/touchend event propagation compared to mousedown/mouseup/click. I highly recommend that you use react-dnd-html5-backend instead for a more performant native HTML5 drag capability.*
Examples
The examples folder has a sample integration. In order to build it, run:
npm i && npm run dev
Then navigate to localhost:7789 or (IP Address):7789 in your mobile browser to access the example.
Code licensed under the MIT license. See LICENSE file for terms.
