Skip to content

Latest commit

 

History

History
62 lines (45 loc) · 2.54 KB

README.md

File metadata and controls

62 lines (45 loc) · 2.54 KB
Raw

react logo

react-dnd-touch-backend

npm version Dependency Status devDependency Status gzip size

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);

Options

You have the following options available to you, which you can pass in like so:

DragDropContext(TouchBackend(options))

Options include:

  • enableTouchEvents
  • enableMouseEvents
  • enableKeyboardEvents
  • delayTouchStart
  • delayMouseStart

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.