Fix for drag in scrolling container: set dropEffect to 'none' when ca…

…nDrop is false (#1131)

* Set dropEffect to 'none' when canDrop is false. dropEffect should not depend on drag source rect (if drag source position has changed, dropEffect should be 'none' when drop is disabled).

* Remove unused code (we don't need to get/compare currentDragSourceNodeOffset anymore)

* revert lodash change

packages/react-dnd-html5-backend/package.json

@@ -21,8 +21,7 @@
 	},
 	"dependencies": {
 		"dnd-core": "^4.0.5",
-		"lodash": "^4.17.11",
-		"shallowequal": "^1.1.0"
+		"lodash": "^4.17.11"
 	},
 	"devDependencies": {
 		"@types/react": "16.3.14",

packages/react-dnd-html5-backend/src/HTML5Backend.ts

@@ -6,7 +6,6 @@ import {
 	DragDropActions,
 	DragDropMonitor,
 	HandlerRegistry,
-	XYCoord,
 } from 'dnd-core'
 import EnterLeaveCounter from './EnterLeaveCounter'
 import { isFirefox } from './BrowserDetector'
@@ -22,7 +21,6 @@ import {
 import * as NativeTypes from './NativeTypes'
 import { HTML5BackendContext } from './interfaces'
 const defaults = require('lodash/defaults')
-const shallowEqual = require('shallowequal')
 
 declare global {
 	// tslint:disable-next-line interface-name
@@ -50,8 +48,6 @@ export default class HTML5Backend implements Backend {
 	private currentNativeSource: any = null
 	private currentNativeHandle: any = null
 	private currentDragSourceNode: any = null
-	private currentDragSourceNodeOffset: XYCoord | null = null
-	private currentDragSourceNodeOffsetChanged: boolean = false
 	private altKeyPressed: boolean = false
 	private mouseMoveTimeoutTimer: any = null
 	private asyncEndDragFrameId: any = null
@@ -279,8 +275,6 @@ export default class HTML5Backend implements Backend {
 	private setCurrentDragSourceNode(node: any) {
 		this.clearCurrentDragSourceNode()
 		this.currentDragSourceNode = node
-		this.currentDragSourceNodeOffset = getNodeClientOffset(node)
-		this.currentDragSourceNodeOffsetChanged = false
 
 		// A timeout of > 0 is necessary to resolve Firefox issue referenced
 		// See:
@@ -315,8 +309,6 @@ export default class HTML5Backend implements Backend {
 	private clearCurrentDragSourceNode() {
 		if (this.currentDragSourceNode) {
 			this.currentDragSourceNode = null
-			this.currentDragSourceNodeOffset = null
-			this.currentDragSourceNodeOffsetChanged = false
 
 			if (this.window) {
 				this.window.clearTimeout(this.mouseMoveTimeoutTimer)
@@ -334,24 +326,6 @@ export default class HTML5Backend implements Backend {
 		return false
 	}
 
-	private checkIfCurrentDragSourceRectChanged() {
-		const node = this.currentDragSourceNode
-		if (!node) {
-			return false
-		}
-
-		if (this.currentDragSourceNodeOffsetChanged) {
-			return true
-		}
-
-		this.currentDragSourceNodeOffsetChanged = !shallowEqual(
-			getNodeClientOffset(node),
-			this.currentDragSourceNodeOffset,
-		)
-
-		return this.currentDragSourceNodeOffsetChanged
-	}
-
 	private handleTopDragStartCapture = () => {
 		this.clearCurrentDragSourceNode()
 		this.dragStartSourceIds = []
@@ -570,11 +544,9 @@ export default class HTML5Backend implements Backend {
 			// "drop and blow away the whole document" action.
 			e.preventDefault()
 			e.dataTransfer.dropEffect = 'none'
-		} else if (this.checkIfCurrentDragSourceRectChanged()) {
-			// Prevent animating to incorrect position.
-			// Drop effect must be other than 'none' to prevent animation.
+		} else {
 			e.preventDefault()
-			e.dataTransfer.dropEffect = 'move'
+			e.dataTransfer.dropEffect = 'none'
 		}
 	}