Revert "Simplify the even flow, end drag whenever receiving mousemove…

… after dragstart instead of depending on dragend to be trigger (#799)" (#835)

This reverts commit 8a3eb74.

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

@@ -32,6 +32,7 @@ export default class HTML5Backend {
     this.getSourceClientOffset = this.getSourceClientOffset.bind(this);
     this.handleTopDragStart = this.handleTopDragStart.bind(this);
     this.handleTopDragStartCapture = this.handleTopDragStartCapture.bind(this);
+    this.handleTopDragEndCapture = this.handleTopDragEndCapture.bind(this);
     this.handleTopDragEnter = this.handleTopDragEnter.bind(this);
     this.handleTopDragEnterCapture = this.handleTopDragEnterCapture.bind(this);
     this.handleTopDragLeaveCapture = this.handleTopDragLeaveCapture.bind(this);
@@ -40,7 +41,7 @@ export default class HTML5Backend {
     this.handleTopDrop = this.handleTopDrop.bind(this);
     this.handleTopDropCapture = this.handleTopDropCapture.bind(this);
     this.handleSelectStart = this.handleSelectStart.bind(this);
-    this.endDrag = this.endDrag.bind(this);
+    this.endDragIfSourceWasRemovedFromDOM = this.endDragIfSourceWasRemovedFromDOM.bind(this);
     this.endDragNativeItem = this.endDragNativeItem.bind(this);
     this.asyncEndDragNativeItem = this.asyncEndDragNativeItem.bind(this);
   }
@@ -86,6 +87,7 @@ export default class HTML5Backend {
     }
     target.addEventListener('dragstart', this.handleTopDragStart);
     target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
+    target.addEventListener('dragend', this.handleTopDragEndCapture, true);
     target.addEventListener('dragenter', this.handleTopDragEnter);
     target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
     target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
@@ -102,6 +104,7 @@ export default class HTML5Backend {
     }
     target.removeEventListener('dragstart', this.handleTopDragStart);
     target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
+    target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
     target.removeEventListener('dragenter', this.handleTopDragEnter);
     target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
     target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
@@ -233,7 +236,12 @@ export default class HTML5Backend {
     this.currentNativeSource = null;
   }
 
-  endDrag() {
+  endDragIfSourceWasRemovedFromDOM() {
+    const node = this.currentDragSourceNode;
+    if (document.body.contains(node)) {
+      return;
+    }
+
     if (this.clearCurrentDragSourceNode()) {
       this.actions.endDrag();
     }
@@ -247,17 +255,16 @@ export default class HTML5Backend {
 
     // Receiving a mouse event in the middle of a dragging operation
     // means it has ended and the drag source node disappeared from DOM,
-    // so the browser didn't dispatch the dragend event or browser fail
-    // to trigger dragend (i.e: Chrome 59)
-    this.window.addEventListener('mousemove', this.endDrag, true);
+    // so the browser didn't dispatch the dragend event.
+    this.window.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
   }
 
   clearCurrentDragSourceNode() {
     if (this.currentDragSourceNode) {
       this.currentDragSourceNode = null;
       this.currentDragSourceNodeOffset = null;
       this.currentDragSourceNodeOffsetChanged = false;
-      this.window.removeEventListener('mousemove', this.endDrag, true);
+      this.window.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
       return true;
     }
 
@@ -390,6 +397,15 @@ export default class HTML5Backend {
     }
   }
 
+  handleTopDragEndCapture() {
+    if (this.clearCurrentDragSourceNode()) {
+      // Firefox can dispatch this event in an infinite loop
+      // if dragend handler does something like showing an alert.
+      // Only proceed if we have not handled it already.
+      this.actions.endDrag();
+    }
+  }
+
   handleTopDragEnterCapture(e) {
     this.dragEnterTargetIds = [];
 
@@ -531,6 +547,8 @@ export default class HTML5Backend {
 
     if (this.isDraggingNativeItem()) {
       this.endDragNativeItem();
+    } else {
+      this.endDragIfSourceWasRemovedFromDOM();
     }
   }