Currently only the first matching data type is returned, however it is possible that dropped content may contain data of multiple types. For example when dropping a draggable image from another page, the url and html types may both be present.

Is there scope to rework the plugin to return all matched data types, rather than just the first match?

• Note that files array is empty
• Also, in Chrome it is recognized as __NATIVE_URL__

Firefox 47.0a2

Currently, the native drag source for Files only extracts "files" from the data transfer object. In order to use Chrome's support for folders and folder traversal, it would be nice to have the "items" as well.

I've been able to monkey patch the HTML5Backend to pass along what I need.

function makeFolderAwareHTML5Backend(manager) {
  const backend = HTML5Backend(manager);
  const orig = backend.handleTopDropCapture;
  backend.handleTopDropCapture = function(event) {
    backend.currentNativeSource.item.items = event.dataTransfer.items;
    return orig(event);
  }
  return backend;
}

export default DragDropContext(makeFolderAwareHTML5Backend)(DropTarget(types, fileTarget, collect)(App));

A bit hard to explain, but basically, when dragging an item up to the top of the page, such that the page has to scroll up, when you bring the dragging item back down, into the page, the drop preview always shows as though you're over a valid drop target.

Somehow dragging an item up, and causing a page scroll fools the backend into thinking you're always over a valid drop target.

In Firefox 47/48 if you try to drag and drop a file from windows explorer into the example page you will see "Error: Cannot call hover while not dragging." in the console. In Firefox 45/46 this happens when you drop the file while moving the mouse.

It seems that Firefox no longer needs the mousemove event listener. I removed it here https://github.com/bouwwouw/react-dnd-html5-backend/commit/555a65ae53719fe0b45c273344d264f5d0bd782a and this fixes the issue. I've tested this for a while and it doesn't seem to break anything else.

Tested on Windows 10.

Hi,

I'd like to ensure that:

1. Only 1 file is dragged over, and
2. The file type matches my list of allowed files.

However when I try to retrieve the value of files in the canDrop function, it returns a Browser doesn't allow reading "files" until the drop event.

Are there ways to work around this? Thanks!

There seems to be an error importing HTML5Backend
Here's my babel config in package.json

"babel": {
    "presets": [
      [
        "latest",
        {
          "es2015": {
            "modules": false
          }
        }
      ],
      "react",
      "stage-0"
    ],
    "env": {
      "production": {
        "only": [
          "app"
        ],
        "plugins": [
          "transform-react-remove-prop-types",
          "transform-react-constant-elements",
          "transform-react-inline-elements"
        ]
      },
      "test": {
        "plugins": [
          "istanbul"
        ]
      }
    }
  }

And here's the webpack.config.js file

  {  
  entry:  [
    path.join(process.cwd(), 'app/app.js'),
  ],
  output: {
    path: path.resolve(process.cwd(), 'build'),
    publicPath: '/'
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',

  }, 
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
    }, {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ['style', 'css', 'sass'],
    }, {

      test: /\.css$/,
      include: /node_modules/,
      loaders: ['style-loader', 'css-loader'],
    }, {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader',
    }, {
      test: /\.(jpg|png|gif)$/,
      loaders: [
        'file-loader',
        'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}',
      ],
    }, {
      test: /\.html$/,
      loader: 'html-loader',
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.(mp4|webm)$/,
      loader: 'url-loader?limit=10000',
    }],
  },
  plugins: [
    new WebpackNotifierPlugin({
      title: 'Webpack',
      excludeWarnings: true
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      children: true,
      minChunks: 2,
      async: true,
    }),

    new webpack.optimize.DedupePlugin(),

    new HtmlWebpackPlugin({
      template: 'app/index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      inject: true,
    }),

    new webpack.ProvidePlugin({
      fetch: 'exports?self.fetch!whatwg-fetch',
    }),

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
    new webpack.NamedModulesPlugin(),
  ]),
  resolve: {
    modules: ['app', 'node_modules'],
    extensions: [
      '.js',
      '.jsx',
      '.react.js',
    ],
    mainFields: [
      'browser',
      'jsnext:main',
      'main',
    ],
  },
  target: 'web', 
}

I've imported Html5Backend as shown in the docs

import HTML5Backend from 'react-dnd-html5-backend';

Although the webpack build completes successfully, on running, the following error is shown in the browser console.

main.cf54330….js:1 Dynamic page loading failed TypeError: Cannot read property 'call' of undefined
    at t (main.cf54330….js:1)
    at Object../node_modules/react-dnd-html5-backend/lib/HTML5Backend.js (0.b342625….chunk.js:12)
    at t (main.cf54330….js:1)
    at Object../node_modules/react-dnd-html5-backend/lib/index.js (0.b342625….chunk.js:12)
    at t (main.cf54330….js:1)
    at Object../app/containers/ReportingView/index.js (0.b342625….chunk.js:1)
    at t (main.cf54330….js:1)
    at Object../app/containers/HomePage/index.js (0.b342625….chunk.js:1)
    at t (main.cf54330….js:1)

According to the docs when we call monitor.getItem() from target drop handler it must return the object we passed in draggable source beginDrag(). I've tested it on expamples from website in different browsers (Chrome, IE and Edge):

1. stress test: http://gaearon.github.io/react-dnd/examples-dustbin-stress-test.html
2. single dustbin: http://gaearon.github.io/react-dnd/examples-dustbin-single-target.html

and I found that everything works fine IE and Edge but does not work in Chrome (Version 46.0.2490.80 m) - getItem returns null in drop handler althogh it returns required object in canDrop and hover both. Here is an exception that I receive:

Uncaught Error: Invariant Violation: Cannot call endDrag while not dragging.
invariant @ browser.js?9520:42 endDrag @ dragDrop.js?8117:170 (anonymous function) @ DragDropManager.js?26ce:74 endDragIfSourceWasRemovedFromDOM @ HTML5Backend.js?0327:230 handleTopDrop @ HTML5Backend.js?0327:527

I have an odd requirement: I need to access setData() within the dragStart event. This is required since we hacked Electron to allow for dragging out of files. Our hook uses setData() to inform Electron to begin dragging out naive files.

It'd still like to use react-dnd for in-app drag/drop. But, I need to call that method!

Looking here, I don't see any affordance: https://github.com/gaearon/react-dnd-html5-backend/blob/master/src/HTML5Backend.js#L264-L348

Am I missing somewhere the code where I can access it?

Lastly, does providing a callback for that type of thing seem appropriate for a feature, or should I just fork and use it as a custom backend?

Description

When I try to drag a react-dnd enabled div containing a complex material-ui table in Chrome then the HTML 5 backend does not correctly snapshot the drag source - instead it just displays a slightly different mouse cursor.

(Sidenote: On my machine, when I "drop" the table on the target my browser crashes. Sometimes I even get booted out of my Linux desktop as a result - at a guess this is some "infinite loop"-like situation causing chrome to runaway and starve the system of resources. But I cannot reproduce this more severe version of the bug on another machine).

The above issue(s) do not happen in firefox, which initially made me think that it is the webkit issue described at #18 (comment)

However, I have tried the suggested workaround but I still get the issue. It is possible that there I have missed the application of the workaround to one of the div's that the material-ui table generates but I think I had gotten them all.

I have a test case based on the "01 Dustbin" example that comes with react-dnd. Basically, I have forked the react-dnd repo, added in the material-ui package and tweaked the dustbin example to put a material-ui table the boxes that are dragged.

Example of bug
theirishpenguin/react-dnd@c51a1b3

(Just visit the dustbin example when you once you have your local server running - ie. http://localhost:8080/examples-dustbin-single-target.html)

Example without bug (ie. when I use a simpler material-ui table)
theirishpenguin/react-dnd@2fbe03c

(Again, just visit the dustbin example when you once you have your local server running at http://localhost:8080/examples-dustbin-single-target.html)

Note: If you diff the above commits you can see the exact differences.

Versions

• Material-UI: 0.16.6
• React: 15.4.1
• Browser: Version 52.0.2743.116 (64-bit)

Related

I had previously opened this bug on the material-ui github issue tracker (mui/material-ui#5898) but moved it here once I had a working test case.

I have implemented react DnD into an isomorphic application and I'm getting the following error:

Server error: renderOnServer render function failed TypeError: target.addEventListener is not a function (at HTML5Backend.addEventListeners)

Any help with this or reasons why it might be happening would be great. Thanks.

I have been testing react, redux and react-dnd for a new project and came with a strange situation that doesn't work in Google Chrome (I've only tested it on windows. both 32bit and 64bit). It works fine in Firefox and IE11.

I'm showing a list of divs that are backed up by redux store,

I'm using dnd to drop one item on another to exchange them.

The first 5 or so items in the list can be dragged but the the rest cannot.
I'v put a console log on canDrop on the render of the component and you can see, that for those items that cannot be dragged, it changes immediately from true to false.

I've put a sample project at github https://github.com/zivni/test-react-dnd-chrome

Edit: I identified the source of the problem. it is the classes on the dragged div. in my PlacedItemContainer.tsx i'm using classNames to add classes on items when moving over or can drop in them:

<div className={classNames(this.getDndStyle()) }>

...

private getDndStyle(): ClassDictionary {
    const {isOver, canDrop} = this.props;
    return {
        ['itemIsOver']: isOver && canDrop,
        ['itemCanDrop']: canDrop,
    }
}

the styles are:

.itemIsOver{
    background: yellowgreen;
}

.itemCanDrop{
    border: 1px solid green;
}

As you can see, in normal mode there is no css class on the div.
When I removed the class from the div or when I changed to

    return {
        ['item']: true,
        ['itemIsOver']: isOver && canDrop,
        ['itemCanDrop']: canDrop,
    }
and css:
.item{
    border: 1px solid black;
}

It started to work.

But when the css was not border but background for instance, it didn't work. but this did work:

.itemIsOver{
    background: yellowgreen;
}

.item .itemCanDrop{
    border: 1px solid green;
}

.item{
    background: wheat;
}

Also just putting the item class on the div without an actual css style, didn't work.

I have an app that uses the HTML5 backend for drop and drop internally. I want to use a sub-component that also uses it independently, but in the same app. Currently this is only possible if I can actually make changes to this sub-component to remove it's DragContext or export one without which seems unnecessary.

Reading through the code, it seems that connecting a drag source mutates the DOM nodes and registers handlers as opposed to using React's handlers attribute setting. Is it possible to use React's attribute and event system instead?

If not, is it possible to safely connect the DragSource lazily, during an onClick handler?

Moved from react-dnd/react-dnd#257.
Original issue by @carlosrberto:

this can be seen in the example: http://gaearon.github.io/react-dnd/examples-drag-around-naive.html

Hey,

I have an element that I'm dragging around and it works great by itself, but that element could have an icon attached to it with position: absolute; left: -24px; which breaks the positioning.

This html5-backend doesn't care about the icon which it shouldn't, but the native drag and drop api does, since it includes the icon in the preview rendering, so when the html5-backend tries to fix the position it instead breaks it for me.

Is there a way for me to kinda hijack the positioning function and just add a couple of pixels to the x coordinate that it creates?

In our application we started to observe issue with dragging item image. Here is how it looks like:

As one can mention outcome items are not drawn at all, while question items are 'screenshotted' without inner text (only grey rectangle).

Reproducible only on Chrome 50 (checked on 50.0.2661.75, on .86 and on .87m) .
On FF and Safari all works as expected though...
Can it be related to this Chrome 50 commit:

https://chromium.googlesource.com/chromium/src/+/d1e45374111c047fc69c8719434bf14417f74d2e

What can be the way to tackle this issue?

Hi.

i'm using an old version of this library, we've forked our own version based on react-dnd-html5-backend 2.1.2.

We never tried in another browser than Chrome until now and I get the following exception when trying to drag an Image:

TypeError: this.dragStartSourceIds is null

  HTML5Backend.prototype.handleDragStart = function handleDragStart(e, sourceId) {
    this.dragStartSourceIds.unshift(sourceId);
  };

It may be related to #29

Is there any fix for this? At least for FF?

The DataTransferItems interface is the successor to the FilesList interface of DataTransfer objects. It's only currently supported by Chrome.

https://www.w3.org/TR/html51/editing.html#the-datatransfer-interface
https://www.w3.org/TR/html51/editing.html#the-datatransferitemlist-interface

While the files property is not accessible on event.dataTransfer during drag events event, the items property is. This lets us respond to native drag data much earlier stage.

monkey patch 🙉

import HTML5Backend from 'react-dnd-html5-backend/lib/HTML5Backend';
import {isFirefox} from 'react-dnd-html5-backend/lib/BrowserDetector';
import {createNativeDragSource, matchNativeItemType}
  from 'react-dnd-html5-backend/lib/NativeDragSources';

HTML5Backend.prototype.updateCurrentNativeSourceItem = function(dataTransfer) {
  const items = Array.prototype.slice.call(dataTransfer.items || []);
  this.currentNativeSource.item.items = items;
};

// Wrapped methods:

const {handleTopDrop} = HTML5Backend.prototype;
HTML5Backend.prototype.handleTopDrop = function(e) {
  if (this.isDraggingNativeItem()) {
    this.updateCurrentNativeSourceItem(e.dataTransfer);
  }
  return handleTopDrop.call(this, e);
};

const {handleTopDragEnter} = HTML5Backend.prototype;
HTML5Backend.prototype.handleTopDragEnter = function(e) {
  if (this.isDraggingNativeItem()) {
    this.updateCurrentNativeSourceItem(e.dataTransfer);
  }
  return handleTopDragEnter.call(this, e);
};

const {handleTopDragOver} = HTML5Backend.prototype;
HTML5Backend.prototype.handleTopDragOver = function(e) {
  if (this.isDraggingNativeItem()) {
    this.updateCurrentNativeSourceItem(e.dataTransfer);
  }
  return handleTopDragOver.call(this, e);
};

// Patched methods:

HTML5Backend.prototype.handleTopDragEnterCapture = function(e) {
  this.dragEnterTargetIds = [];

  const isFirstEnter = this.enterLeaveCounter.enter(e.target);
  if (!isFirstEnter || this.monitor.isDragging()) {
    return;
  }

  const {dataTransfer} = e;
  const nativeType = matchNativeItemType(dataTransfer);

  if (nativeType) {
    this.beginDragNativeItem(nativeType/* PATCH */, dataTransfer/* END PATCH */);
  }
};

HTML5Backend.prototype.beginDragNativeItem = function(type, dataTransfer) {
  this.clearCurrentDragSourceNode();

  const SourceType = createNativeDragSource(type);
  this.currentNativeSource = new SourceType();
  /* PATCH */
  this.updateCurrentNativeSourceItem(dataTransfer);
  /* END PATCH*/
  this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
  this.actions.beginDrag([this.currentNativeHandle]);

  // On Firefox, if mousemove fires, the drag is over but browser failed to tell us.
  // This is not true for other browsers.
  if (isFirefox()) {
    window.addEventListener('mousemove', this.endDragNativeItem, true);
  }
};

Moved from react-dnd/react-dnd#390:

In MSEdge (and it seems ONLY in MSEdge; other IE versions, Firefox, Chrome, Safari, ... worked fine) the whole UI of our React application stopped responding. No error message, nothing, the page just went dead.

We implemented our DropHere component as such:

import { DropTarget } from 'react-dnd';

class DropHere {
  /* ... code shortened for brevity ... */
 render() {
   const { canDrop } = this.props;
   return canDrop ? <div>drop here</div> : false;
 }
}

export default DropTarget(types, spec, collect)(DropHere);

So that dropzone only appears while dragging. What fixed the problem with frozen UI was to always render the dropzone div and hide it with CSS when nothing is being dragged.

Intro

@pithu and me have an idea how to improve this library for supporting the drag and drop operations "copy", "move" and "link". We would implement these ideas as PRs to the html5-backend and dnd-core repository. Beforehand, we want to ask the maintainers of this library if our idea has a chance to be merged.

Motivation

In our application, we want to support the drag and drop operations "copy", "move" and "link". We want the cursor to reflect the dropEffect. This should be changable while dragging by pressing modifier keys.

This is all possible with the html5 spec. We want to follow the spec as close as possible. As opposed to #23 we neither want to evaluate the modifier keys of the event nor manually setting the dataTransfer.dropEffect. Instead, we let the browser control which dropEffect is applied when pressing certain modifier keys (e.g. on macOS, Firefox uses alt+cmd to change the dropEffect to link, Chrome uses ctrl).

The advantage of this approach is that we support all browsers that follow the HTML5 spec without messing with modifier keys and setting dropEffect manually.

In a proof of concept on macOS, we found that Firefox and Chrome are working, Safari works partly. Internet Explorer 11 only supports copy.

Implementation

The default behaviour keeps unchanged.

We want to introduce a flag useBrowserDropEffect to prevent the backend from overwriting the dataTransfer.dropEffect.

Only when setting this flag, the following calculations will happen:

• calculate normalizedDropEffect from dataTransfer.dropEffect and dataTransfer.effectAllowed
• extend hover action payload to include normalizedDropEffect
• extend reducers in dnd-core
• extend monitor with method getDropEffect to make it available in the react components

Originally filed by @Devilly as react-dnd/react-dnd#539.

While working on a project it was noted that the native file drop didn't always work in Firefox. I didn't see any error or whatsoever but I did see the file drop was not handled by the function I had made therefore. While trying to create a testcase I made https://jsfiddle.net/r2mudx7a/ and there quite often the following error is thrown:

Error: Cannot call hover while not dragging.

When trying the fiddle please drag on a text file on the dashed square. In my latest test run I got the error nine times before it finally worked (the file was read and outputted to the console).

Due to chromium bug 412373 this backend isn't workin in chromium webview elements.

I've read that setting dataTransfer.setData('text', /* .. */); helps, similar to the firefox workaround dataTransfer.setData('application/json', {});.

I went ahead an added dataTransfer.setData('text', 'asdf'); a line before the firefox hack. Now, dropping is at least trinngering the callback, but I'm stuck with this error: Uncaught Invariant Violation: Cannot call hover while not dragging. caused by this line.

The code is working fine in a regular browser. Ideas and help greatly appreciated. Chromium bug is fixed but it will take a while before it's released and linked in dependencies like electron.

Hey there, we're using react-dnd-html5-backend from NPM and we're quite surprised by the size of the library. The whole react-dnd is taking 4.7M and almost all of that is only lodash. From lodash you're using only memoize, union, without and defaults functions. These are available separately from NPM taking only 148K.

I've already reported similar issue in react-dnd and also #39 might be related to this.

Would you be interested in a PR?

I'm sticking close to the documentation and everything seems to work except for this console error:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

I double-checked that I don't have more than one version of React running, and the error only pops up when I wrap my component with the DragDropContext. Oddly this issue doesn't seem to affect the drag and drop functionality, but as soon as that error is thrown it breaks the router ([email protected] and [email protected]) and my store changes stop propagating.

Is there something about using React Router/Redux that causes issues with with the DnD backends/context?

Hunting around led to only one other (apparently unsolved) reference to the same issue by @blittle here. I'm using React version 15.3.1.

Not sure if this is more appropriate in https://github.com/gaearon/react-dnd/issues but figured I'd start here. Thanks!

I've prepared a minimal example here: https://github.com/danielberndt/react-starter/tree/react-dnd-test

When dropping an image, it should be calling the drop method but instead the file gets opened in the browser. No warning or error gets issued.

This fails on Chrome 47 on Mac 10.9.5. It works fine on Firefox and used to work fine on earlier versions of Chrome on my machine.

http://recordit.co/4xFfdIUkb4

http://gaearon.github.io/react-dnd/examples-sortable-cancel-on-drop-outside.html has this little issue on Chrome46, the indicator just below the mouse cursor shows I can drop the element while I was completely out of the drop zone

When I drag a native URL (that is, a link), Edge does not recognize it.
IE, however, does.

Originally reported here: react-dnd/react-dnd#513

First off, just want to say thanks for building react-dnd and its core libraries. The abstractions are wonderful to work with and very flexible.

Currently using dnd-core and react-dnd-html5-backend inside of an ember addon and it works great! But, I am using bower to grab the react-dnd-html5-backend because the npm package has a react-dnd peer dependency, which makes sense due to the name of the package. I would like to propose moving the html5 backend into a package named something like dnd-core-html5-backend without the react-dnd peer dep, then updating react-dnd-html5-backend to use dnd-core-html5-backend with the react-dnd peer dependency. If this sounds reasonable, let me know if there is anything I can do to help.

• @Samsinite

Moved from react-dnd/react-dnd#341.
Original issue by @ceguster

I am trying to preserve the appearance of a div containing an tag while dragging it. In Chrome and Firefox, I have no trouble, but in Safari, when I begin dragging the element, its appearance changes to the native browser implementation of a dragged link.

I verified the discrepancy in Safari by cloning your repo and changing the markup in react-dnd/examples/02 Drag Around/Naive/Box.js to include an tag (see diff below).

Even with that change, Chrome and Firefox are still able to show the original image while dragging.

Running OS X Yosemite (10.10.5)
Browsers:

• Safari: 9.0.1 (10601.2.7.2)
• Chrome: 46.0.2490.86 (64-bit)
• Firefox: 42.0

Right now it doesn't seem like modifier keys are supported while dragging items.

By modifier keys I mean like pressing the alt key to enter copy 'mode' instead of move 'mode'. Just like when moving files around in the Mac OS finder app, you have the option to hold down alt to copy instead of move.

A trivial solution to this, would be to listen for keydown events on the window while dragging, and then alter some state indicating whether or not it should copy. Unfortunately keyboard events won't trigger while dragging. (apparently the browser enters some 'drag' mode) Making this impossible.

However the HTML5 drag and drop api does support modifier keys: https://developer.mozilla.org/en-US/docs/Web/Events/drag

But since this is abstracted away in the backend, it needs to support this somehow, and propagate it to the 'end user' components.

Question is was this left out for some reason? Maybe bad performance?

Windows, Linux and OSX
Chrome v52

Drag items that contains elements placed so far away and your Chrome tab will crash.

Demo

It looks like there's a slight bug with the drag icon - see the attached image. If you drag in item from deep within a hierarchy, when you get outside the whole list, the icon shows the valid "rectangle" as though you're over a valid drop target.

If you drag a top-level item, like Biology, then everything's fine, and the invalid drop icon shows when you get above the main list.

If someone can point me in the right direction I'd be happy to try to find a fix for this.

Affected versions:
54.0.2840.59 and 53.0.2785.143 (64-bit) on Windows

Issue:
Right after the dragging starts, on mouse button down and a few pixels moved, the dragged item glitches and goes in the awkward position for a few milliseconds.

Findings:
This issue appears in Chrome on Windows if the active screen uses scaling. I couldn't reproduce the issue with other libraries/backends/vanilla HTML5 Drag'n'drop API.

This is a potentially related issue: react-dnd/react-dnd#552

Glitches:

Glicth #1

Glicth #2

react-dnd/react-dnd#577

I'm experiencing a slight conflict when dropping files into react-dropzone, resulting in the following errors.

Uncaught Invariant Violation: Expected targetIds to be an array
Uncaught Invariant Violation: Cannot call hover while not dragging.

Example:

To get around this I have applied a conditional to handleTopDrop to check
that dropTargetIds exists and has a length.

handleTopDrop(e) {
  const { dropTargetIds } = this;
  this.dropTargetIds = [];

  // Make sure we have dropTargetIds
  if (!dropTargetIds || !dropTargetIds.length) {
    return;
  }

  this.actions.hover(dropTargetIds, {
    clientOffset: getEventClientOffset(e)
  });

  ...

Example:

This solves my issue and quite possibly could solve #25.

I have a drag and drop file upload area in the DragDropContext, but the handleTopDragOver prevents the drag event which makes my drag and drop upload component not working.

Any workaround to solve the problem?

Moved from react-dnd/react-dnd#180.
Original issue by @adjohu.

If I zoom out and start dragging elements, they appear offset from the mouse.

Hello,
I have problem with IE, when I want to edit textArea text inside dragable content it does not working.

HTML5Backend.prototype.handleSelectStart = function handleSelectStart(e) {
    // Prevent selection on IE
    // and instead ask it to consider dragging.
    if (typeof e.target.dragDrop === 'function') {
      e.preventDefault();
      e.target.dragDrop();
    }
  };

When I comment this code it is working. Is here some solution to this issue? Thank you

edit: something like this is working, but is it correct way?

HTML5Backend.prototype.handleSelectStart = function handleSelectStart(e) {
    if (e.target.nodeName === 'TEXTAREA') {
      return;
    }
    // Prevent selection on IE
    // and instead ask it to consider dragging.
    if (typeof e.target.dragDrop === 'function') {
      e.preventDefault();
      e.target.dragDrop();
    }
  };

edit: I am trying it with this component: https://github.com/andreypopp/react-textarea-autosize

Recently I’ve been dealing with compatibility issues of a project using React-DnD. Now exactly because of the code from react-dnd-html5-backend, the web app ceases to work in IE8. What can I do?

Hi,

I am trying to get the file drop feature work. It seems to not be working on the http://gaearon.github.io/react-dnd/examples-dustbin-multiple-targets.html

I get the error:** Uncaught Invariant Violation: Cannot call hover while not dragging. **I am using Chrome. I am new to react and redux. Please help me thanks.

Currently using react-dnd-html5-backend version 2.1.2 and when I attempt to drag plain text i get the following error in the console:

Error: Permission denied to access property "types"
Stack trace:
matchNativeItemType@http://localhost:3000/vendor.js:146674:8
handleTopDragStart@http://localhost:3000/vendor.js:146203:23
EventListener.handleEvent*addEventListeners@http://localhost:3000/vendor.js:145968:6
setup@http://localhost:3000/vendor.js:145954:6
handleRefCountChange@http://localhost:3000/vendor.js:150435:8
dispatch@http://localhost:3000/vendor.js:56888:8
addSource@http://localhost:3000/vendor.js:99625:6
registerSource@http://localhost:3000/vendor.js:150034:19
receiveType@http://localhost:3000/vendor.js:99327:31
receiveProps@http://localhost:3000/vendor.js:99317:8
componentDidMount@http://localhost:3000/vendor.js:99299:8
notifyAll@http://localhost:3000/vendor.js:100376:10
close@http://localhost:3000/vendor.js:159318:6
closeAll@http://localhost:3000/vendor.js:50949:12
perform@http://localhost:3000/vendor.js:50896:12
perform@http://localhost:3000/vendor.js:50883:14
perform@http://localhost:3000/vendor.js:20726:13
flushBatchedUpdates@http://localhost:3000/vendor.js:20809:8
close@http://localhost:3000/vendor.js:20684:8
closeAll@http://localhost:3000/vendor.js:50949:12
perform@http://localhost:3000/vendor.js:50896:12
perform@http://localhost:3000/vendor.js:20726:13
flushBatchedUpdates@http://localhost:3000/vendor.js:20809:8
close@http://localhost:3000/vendor.js:20684:8
closeAll@http://localhost:3000/vendor.js:50949:12
perform@http://localhost:3000/vendor.js:50896:12
perform@http://localhost:3000/vendor.js:20726:13
flushBatchedUpdates@http://localhost:3000/vendor.js:20809:8
closeAll@http://localhost:3000/vendor.js:50949:12
perform@http://localhost:3000/vendor.js:50896:12
batchedUpdates@http://localhost:3000/vendor.js:158253:15
batchedUpdates@http://localhost:3000/vendor.js:20734:11
_renderNewRootComponent@http://localhost:3000/vendor.js:101478:6
_renderSubtreeIntoContainer@http://localhost:3000/vendor.js:101559:22
render@http://localhost:3000/vendor.js:101580:13
@http://localhost:3000/app.bundle.js:463952:2
webpack_require@http://localhost:3000/vendor.js:551:12
fn@http://localhost:3000/vendor.js:99:20
@http://localhost:3000/app.bundle.js:7:19
webpack_require@http://localhost:3000/vendor.js:551:12
webpackJsonpCallback@http://localhost:3000/vendor.js:22:20
@http://localhost:3000/app.bundle.js:1:1

After some searching the only reference to this problem I have seen is from this stackoverflow answer.

Hi,

I'm following the simple sorting example and I can't find a high-level description of what an "HTML5 backend" is and why it's needed for a client-side app with zero backend (server/db) persistence. Could it be that this project is overloading the term "backend"?

Thanks for building this. I'm very excited to get it working.

Cheers,

Michael

We seem to have two (related?) issues with FF 45 affecting different systems in different ways:

• react-dnd/react-dnd#313 (comment) (FF45, Windows 10)
• react-dnd/react-dnd#313 (comment) (FF45, OS X)

Originally reported by @SoonDead in react-dnd/react-dnd#313, but this repo is the correct place for the bug.

Using dragPreview on a <tr> does not create a drag image in chrome. This is because of a bug in chromium. Should react-dnd-html5-backend work around this "quirk"?

Example: In this example the + sign is the dragSource, while the whole row is the dragPreview. Notice that there is no drag image when you try to drag it.

http://jsbin.com/kidoyu/2/edit?js,output

Right now all drag-and-drop operations that aren't managed by React-DnD are blocked. On pages that already have non-React-DnD drag-and-drop-handling code, this causes things to break while React-DnD is active. An option to disable this behavior would be useful.

For the current time, I've put up a version of react-dnd-html5-backend that's patched to have this disabled on npm.

Hi,

we are using dropzone.js and react dnd in same project. After upgrading html5-backend from 2.0.2 to 2.1.2 we start seeing the following error on console

Uncaught Invariant Violation: Cannot call beginDrag while dragging

Full trace:

browser.js:40 Uncaught Invariant Violation: Cannot call beginDrag while dragging.
invariant @ browser.js:40
beginDrag @ dragDrop.js:53
(anonymous function) @ DragDropManager.js:74
handleTopDragStart @ HTML5Backend.js:313

This happens every time an object is pulled to dropzone from outside of the browser and after this trying to drag a component managed by react-dnd. With 2.0.2 this behavior did not occur.

Best regards,
Florian