New to React DnD? Read the overview before jumping into the docs.

HTML5 

This is the only officially supported backend for React DnD. It uses the HTML5 drag and drop API under the hood and hides its quirks.

Installation 

The HTML5 backend comes in a separate package:

npm install --save react-dnd-html5-backend

While we suggest you to use NPM, you can find the precompiled UMD build in the dist folder available on the latest branch as well as in every tagged release. This is where you can point Bower if that’s what you use.

Extras 

Aside from the default export, the HTML5 backend module also provides a few extras:

  • getEmptyImage(): a function returning a transparent empty Image. Use connect.dragPreview() of the DragSourceConnector to hide the browser-drawn drag preview completely. Handy for drawing the custom drag layers with DragLayer. Note that the custom drag previews don't work in IE.

  • NativeTypes: an enumeration of three constants, NativeTypes.FILE, NativeTypes.URL and NativeTypes.TEXT. You may register the drop targets for these types to handle the drop of the native files, URLs, or the regular page text.

Usage 

import HTML5Backend from 'react-dnd-html5-backend'; import { DragDropContext } from 'react-dnd'; @DragDropContext(HTML5Backend) export default class YourApp { /* ... */ }