Support native html5 dropEffect

[hpurmann]

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 https://github.com/gaearon/react-dnd-html5-backend/issues/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

[hpurmann]

@gaearon? @kesne?