yahoo/react-dnd-touch-backend

Name: react-dnd-touch-backend

Owner: Yahoo Inc.

Description: Touch Backend for react-dnd

Created: 2015-10-05 17:48:04.0

Updated: 2018-05-24 00:47:42.0

Pushed: 2018-04-23 12:27:34.0

Homepage:

Size: 232

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-dnd-touch-backend

Touch Backend for react-dnd

Usage

Follow react-dnd docs to setup your app. Then swap out HTML5Backend for TouchBackend as such:

rt { default as TouchBackend } from 'react-dnd-touch-backend';
rt { DragDropContext } from 'react-dnd';

YourApp = React.createClass(
 ... */



le.exports = DragDropContext(TouchBackend)(YourApp);

Options

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

DropContext(TouchBackend(options))

Options include:

• enableTouchEvents
• enableMouseEvents
• enableKeyboardEvents
• delayTouchStart
• delayMouseStart
• touchSlop
• ignoreContextMenu
• scrollAngleRanges

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:

DropContext(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.**

Other options

touchSlop

• Specifies the pixel distance moved before a drag is signaled.

• Default: 0

  DropContext(TouchBackend({ touchSlop: 20 }));
  

  ignoreContextMenu

• If true, prevents the contextmenu event from canceling a drag.

• Default: false

  DropContext(TouchBackend({ ignoreContextMenu: true }));
  

scrollAngleRanges

• Specifies ranges of angles in degrees that drag events should be ignored. This is useful when you want to allow the user to scroll in a particular direction instead of dragging. Degrees move clockwise, 0/360 pointing to the left.
• Default: undefined

  llow vertical scrolling
  DropContext(TouchBackend({ scrollAngleRanges: [{ start: 30, end: 150 }, { start: 210, end: 330 }] }));
  

// allow horizontal scrolling DragDropContext(TouchBackend({ scrollAngleRanges: [{ start: 300 }, { end: 60 }, { start: 120, end: 240 }] }));

xamples
`examples` folder has a sample integration. In order to build it, run:

npm i && npm run dev

 navigate to `localhost:7789` or `(IP Address):7789` in your mobile browser to access the example.
 licensed under the MIT license. See LICENSE file for terms.