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

react logo


npm version Dependency Status devDependency Status gzip size

Touch Backend for react-dnd



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


 yarn add react-dnd-touch-backend


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


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.


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

  enableTouchEvents: true,
  enableMouseEvents: false,
  enableKeyboardEvents: false,
  ignoreContextMenu: false,
  enableHoverOutsideTarget: false,
  delayTouchStart: 0,
  delayMouseStart: 0,
  touchSlop: 0,
  scrollAngleRanges: undefined


  • Default: true


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


  • Default: false


  • Default: 0


  • Default: 0


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


  • If true, prevents the contextmenu event from canceling a drag.
  • Default: false
DragDropContext(TouchBackend({ ignoreContextMenu: true }));


  • 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 }] }));


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


  • 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 >=;

// use custom function only if elementsFromPoint is not supported 
  getDropTargetElementsAtPoint: !hasNative && getDropTargetElementsAtPoint,


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


npm i && npm run dev


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.