From 0d6bb650cbd9247e9268534bf36891bfeef1790f Mon Sep 17 00:00:00 2001
From: CommitSyncScript <jeffmo@fb.com>
Date: Thu, 13 Jun 2013 15:49:58 -0700
Subject: [PATCH] Add HTML5 Drag/Drop events to React

---
 src/core/ReactEventEmitter.js         | 11 +++++
 src/dom/DOMProperty.js                |  1 +
 src/event/EventConstants.js           |  8 ++++
 src/eventPlugins/SimpleEventPlugin.js | 67 ++++++++++++++++++++++++++-
 4 files changed, 86 insertions(+), 1 deletion(-)

diff --git a/src/core/ReactEventEmitter.js b/src/core/ReactEventEmitter.js
index 8cb7362b1b..aae86f6f72 100644
--- a/src/core/ReactEventEmitter.js
+++ b/src/core/ReactEventEmitter.js
@@ -200,6 +200,17 @@ function listenAtTopLevel(touchNotMouse) {
     mountAt
   );
 
+  if (isEventSupported('drag')) {
+    trapBubbledEvent(topLevelTypes.topDrag, 'drag', mountAt);
+    trapBubbledEvent(topLevelTypes.topDragEnd, 'dragend', mountAt);
+    trapBubbledEvent(topLevelTypes.topDragEnter, 'dragenter', mountAt);
+    trapBubbledEvent(topLevelTypes.topDragExit, 'dragexit', mountAt);
+    trapBubbledEvent(topLevelTypes.topDragLeave, 'dragleave', mountAt);
+    trapBubbledEvent(topLevelTypes.topDragOver, 'dragover', mountAt);
+    trapBubbledEvent(topLevelTypes.topDragStart, 'dragstart', mountAt);
+    trapBubbledEvent(topLevelTypes.topDrop, 'drop', mountAt);
+  }
+
   if (isEventSupported('wheel')) {
     trapBubbledEvent(topLevelTypes.topWheel, 'wheel', mountAt);
   } else if (isEventSupported('mousewheel')) {
diff --git a/src/dom/DOMProperty.js b/src/dom/DOMProperty.js
index 4b9d44534f..52c4fcd07e 100644
--- a/src/dom/DOMProperty.js
+++ b/src/dom/DOMProperty.js
@@ -154,6 +154,7 @@ var Properties = {
   data: null, // For `<object />` acts as `src`.
   dir: null,
   disabled: MustUseProperty | HasBooleanValue,
+  draggable: null,
   enctype: null,
   height: MustUseAttribute,
   href: null,
diff --git a/src/event/EventConstants.js b/src/event/EventConstants.js
index cd3e794f67..a3bedfa4e2 100644
--- a/src/event/EventConstants.js
+++ b/src/event/EventConstants.js
@@ -31,6 +31,14 @@ var topLevelTypes = keyMirror({
   topClick: null,
   topDOMCharacterDataModified: null,
   topDoubleClick: null,
+  topDrag: null,
+  topDragEnd: null,
+  topDragEnter: null,
+  topDragExit: null,
+  topDragLeave: null,
+  topDragOver: null,
+  topDragStart: null,
+  topDrop: null,
   topFocus: null,
   topInput: null,
   topKeyDown: null,
diff --git a/src/eventPlugins/SimpleEventPlugin.js b/src/eventPlugins/SimpleEventPlugin.js
index 4087223718..160a3f75f2 100644
--- a/src/eventPlugins/SimpleEventPlugin.js
+++ b/src/eventPlugins/SimpleEventPlugin.js
@@ -149,6 +149,54 @@ var SimpleEventPlugin = {
         bubbled: keyOf({onDOMCharacterDataModified: true}),
         captured: keyOf({onDOMCharacterDataModifiedCapture: true})
       }
+    },
+    drag: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDrag: true}),
+        captured: keyOf({onDragCapture: true})
+      }
+    },
+    dragEnd: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDragEnd: true}),
+        captured: keyOf({onDragEndCapture: true})
+      }
+    },
+    dragEnter: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDragEnter: true}),
+        captured: keyOf({onDragEnterCapture: true})
+      }
+    },
+    dragExit: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDragExit: true}),
+        captured: keyOf({onDragExitCapture: true})
+      }
+    },
+    dragLeave: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDragLeave: true}),
+        captured: keyOf({onDragLeaveCapture: true})
+      }
+    },
+    dragOver: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDragOver: true}),
+        captured: keyOf({onDragOverCapture: true})
+      }
+    },
+    dragStart: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDragStart: true}),
+        captured: keyOf({onDragStartCapture: true})
+      }
+    },
+    drop: {
+      phasedRegistrationNames: {
+        bubbled: keyOf({onDrop: true}),
+        captured: keyOf({onDropCapture: true})
+      }
     }
   },
 
@@ -204,7 +252,16 @@ var SimpleEventPlugin = {
       case topLevelTypes.topTouchMove:
       case topLevelTypes.topTouchStart:
       case topLevelTypes.topTouchEnd:
+      case topLevelTypes.topDrag:
+      case topLevelTypes.topDragEnd:
+      case topLevelTypes.topDragEnter:
+      case topLevelTypes.topDragExit:
+      case topLevelTypes.topDragLeave:
+      case topLevelTypes.topDragOver:
+      case topLevelTypes.topDragStart:
+      case topLevelTypes.topDrop:
         data = AbstractEvent.normalizePointerData(nativeEvent);
+        // todo: Use AbstractEvent.normalizeDragEventData for drag/drop?
         break;
       default:
         data = null;
@@ -241,7 +298,15 @@ SimpleEventPlugin.topLevelTypesToAbstract = {
   topChange:      SimpleEventPlugin.abstractEventTypes.change,
   topSubmit:      SimpleEventPlugin.abstractEventTypes.submit,
   topDOMCharacterDataModified:
-                  SimpleEventPlugin.abstractEventTypes.DOMCharacterDataModified
+                  SimpleEventPlugin.abstractEventTypes.DOMCharacterDataModified,
+  topDrag:        SimpleEventPlugin.abstractEventTypes.drag,
+  topDragEnd:     SimpleEventPlugin.abstractEventTypes.dragEnd,
+  topDragEnter:   SimpleEventPlugin.abstractEventTypes.dragEnter,
+  topDragExit:    SimpleEventPlugin.abstractEventTypes.dragExit,
+  topDragLeave:   SimpleEventPlugin.abstractEventTypes.dragLeave,
+  topDragOver:    SimpleEventPlugin.abstractEventTypes.dragOver,
+  topDragStart:   SimpleEventPlugin.abstractEventTypes.dragStart,
+  topDrop:        SimpleEventPlugin.abstractEventTypes.drop
 };
 
 module.exports = SimpleEventPlugin;