New to React DnD? Read the overview before jumping into the docs.
This is the only backend currently shipping with React DnD. It uses the HTML5 drag and drop API under the hood and hides its quirks.
ReactDnD.HTML5
;react-dnd/modules/backends/HTML5
.It is not a top-level export by purpose so that you don't need to include it if you use a custom backend.
Aside from the default export, HTML5
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.
var HTML5Backend = require('react-dnd/modules/backends/HTML5');
var DragDropContext = require('react-dnd').DragDropContext;
var YourApp = React.createClass(
/* ... */
);
module.exports = DragDropContext(HTML5Backend)(YourApp);