Skip to content
Touch Backend for react-dnd.
Branch: master
Clone or download
raineorshine and redonkulus Update README.md (#120)
Consolidate options under one heading
List defaults for all options
Latest commit 8413ac0 Jun 2, 2019

README.md

react logo

react-dnd-touch-backend

npm version Dependency Status devDependency Status gzip size

Touch Backend for react-dnd

Installation

npm:

 npm install react-dnd-touch-backend --save

yarn:

 yarn add react-dnd-touch-backend

Usage

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

import React, { Component } from 'react';
import TouchBackend from 'react-dnd-touch-backend';
import { DragDropContext } from 'react-dnd';

class YourApp extends Component {
  /* ... */
}

export default 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.

Options

You can pass in options like so (defaults shown):

DragDropContext(TouchBackend({
  enableTouchEvents: true,
  enableMouseEvents: false,
  enableKeyboardEvents: false,
  ignoreContextMenu: false,
  enableHoverOutsideTarget: false,
  delayTouchStart: 0,
  delayMouseStart: 0,
  touchSlop: 0,
  scrollAngleRanges: undefined
}))

enableTouchEvents

  • Default: true

enableMouseEvents

  • Default: false

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

enableKeyboardEvents

  • Default: false

delayTouchStart

  • Default: 0

delayMouseStart

  • Default: 0

touchSlop

  • Specifies the pixel distance moved before a drag is signaled.
  • Default: 0
DragDropContext(TouchBackend({ touchSlop: 20 }));

ignoreContextMenu

  • If true, prevents the contextmenu event from canceling a drag.
  • Default: false
DragDropContext(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
// allow vertical scrolling
DragDropContext(TouchBackend({ scrollAngleRanges: [{ start: 30, end: 150 }, { start: 210, end: 330 }] }));

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

enableHoverOutsideTarget

  • Continue dragging of currently dragged element when pointer leaves DropTarget area
  • Default: undefined
DragDropContext(TouchBackend({ enableHoverOutsideTarget: true }));

getDropTargetElementsAtPoint

  • Specify a custom function to find drop target elements at the given point. Useful for improving performance in environments (iOS Safari) where document.elementsFromPoint is not available.
  • Default: undefined (use document.elementsFromPoint or inline elementsFromPoint "polyfill")
const hasNative = document && (document.elementsFromPoint || document.msElementsFromPoint);

function getDropTargetElementsAtPoint(x, y, availableDropTargets) {
  return dropTargets.filter(t => {
    const rect = t.getBoundingClientRect();
    return (x >= rect.left && x <= rect.right && 
            y <= rect.bottom && y >= rect.top);
  });
}

// use custom function only if elementsFromPoint is not supported 
DragDropContext(TouchBackend({
  getDropTargetElementsAtPoint: !hasNative && getDropTargetElementsAtPoint,
}))

Examples

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

npm:

npm i && npm run dev

yarn:

yarn install && yarn 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.

You can’t perform that action at this time.