The library for web and native user interfaces.
Add HTML5 Drag/Drop events to React
CommitSyncScript committed
Jun 13, 2013 at 15:49 UTC
0d6bb650cbd9247e9268534bf36891bfeef1790f
4 files changed
+86
-1
src/core/ReactEventEmitter.js
+11
@@ -200,6 +200,17 @@ function listenAtTopLevel(touchNotMouse) {
200
mountAt
201
);
202
203
+ if (isEventSupported('drag')) {
204
+ trapBubbledEvent(topLevelTypes.topDrag, 'drag', mountAt);
205
+ trapBubbledEvent(topLevelTypes.topDragEnd, 'dragend', mountAt);
206
+ trapBubbledEvent(topLevelTypes.topDragEnter, 'dragenter', mountAt);
207
+ trapBubbledEvent(topLevelTypes.topDragExit, 'dragexit', mountAt);
208
+ trapBubbledEvent(topLevelTypes.topDragLeave, 'dragleave', mountAt);
209
+ trapBubbledEvent(topLevelTypes.topDragOver, 'dragover', mountAt);
210
+ trapBubbledEvent(topLevelTypes.topDragStart, 'dragstart', mountAt);
211
+ trapBubbledEvent(topLevelTypes.topDrop, 'drop', mountAt);
212
+ }
213
+
214
if (isEventSupported('wheel')) {
215
trapBubbledEvent(topLevelTypes.topWheel, 'wheel', mountAt);
216
} else if (isEventSupported('mousewheel')) {
src/dom/DOMProperty.js
+1
@@ -154,6 +154,7 @@ var Properties = {
154
data: null, // For `<object />` acts as `src`.
155
dir: null,
156
disabled: MustUseProperty | HasBooleanValue,
157
+ draggable: null,
158
enctype: null,
159
height: MustUseAttribute,
160
href: null,
src/event/EventConstants.js
+8
@@ -31,6 +31,14 @@ var topLevelTypes = keyMirror({
31
topClick: null,
32
topDOMCharacterDataModified: null,
33
topDoubleClick: null,
34
+ topDrag: null,
35
+ topDragEnd: null,
36
+ topDragEnter: null,
37
+ topDragExit: null,
38
+ topDragLeave: null,
39
+ topDragOver: null,
40
+ topDragStart: null,
41
+ topDrop: null,
42
topFocus: null,
43
topInput: null,
44
topKeyDown: null,
src/eventPlugins/SimpleEventPlugin.js
+66
-1
@@ -149,6 +149,54 @@ var SimpleEventPlugin = {
149
bubbled: keyOf({onDOMCharacterDataModified: true}),
150
captured: keyOf({onDOMCharacterDataModifiedCapture: true})
151
}
152
+ },
153
+ drag: {
154
+ phasedRegistrationNames: {
155
+ bubbled: keyOf({onDrag: true}),
156
+ captured: keyOf({onDragCapture: true})
157
+ }
158
+ },
159
+ dragEnd: {
160
+ phasedRegistrationNames: {
161
+ bubbled: keyOf({onDragEnd: true}),
162
+ captured: keyOf({onDragEndCapture: true})
163
+ }
164
+ },
165
+ dragEnter: {
166
+ phasedRegistrationNames: {
167
+ bubbled: keyOf({onDragEnter: true}),
168
+ captured: keyOf({onDragEnterCapture: true})
169
+ }
170
+ },
171
+ dragExit: {
172
+ phasedRegistrationNames: {
173
+ bubbled: keyOf({onDragExit: true}),
174
+ captured: keyOf({onDragExitCapture: true})
175
+ }
176
+ },
177
+ dragLeave: {
178
+ phasedRegistrationNames: {
179
+ bubbled: keyOf({onDragLeave: true}),
180
+ captured: keyOf({onDragLeaveCapture: true})
181
+ }
182
+ },
183
+ dragOver: {
184
+ phasedRegistrationNames: {
185
+ bubbled: keyOf({onDragOver: true}),
186
+ captured: keyOf({onDragOverCapture: true})
187
+ }
188
+ },
189
+ dragStart: {
190
+ phasedRegistrationNames: {
191
+ bubbled: keyOf({onDragStart: true}),
192
+ captured: keyOf({onDragStartCapture: true})
193
+ }
194
+ },
195
+ drop: {
196
+ phasedRegistrationNames: {
197
+ bubbled: keyOf({onDrop: true}),
198
+ captured: keyOf({onDropCapture: true})
199
+ }
200
}
201
},
202
@@ -204,7 +252,16 @@ var SimpleEventPlugin = {
252
case topLevelTypes.topTouchMove:
253
case topLevelTypes.topTouchStart:
254
case topLevelTypes.topTouchEnd:
255
+ case topLevelTypes.topDrag:
256
+ case topLevelTypes.topDragEnd:
257
+ case topLevelTypes.topDragEnter:
258
+ case topLevelTypes.topDragExit:
259
+ case topLevelTypes.topDragLeave:
260
+ case topLevelTypes.topDragOver:
261
+ case topLevelTypes.topDragStart:
262
+ case topLevelTypes.topDrop:
263
data = AbstractEvent.normalizePointerData(nativeEvent);
264
+ // todo: Use AbstractEvent.normalizeDragEventData for drag/drop?
265
break;
266
default:
267
data = null;
@@ -241,7 +298,15 @@ SimpleEventPlugin.topLevelTypesToAbstract = {
298
topChange: SimpleEventPlugin.abstractEventTypes.change,
299
topSubmit: SimpleEventPlugin.abstractEventTypes.submit,
300
topDOMCharacterDataModified:
244
- SimpleEventPlugin.abstractEventTypes.DOMCharacterDataModified
301
+ SimpleEventPlugin.abstractEventTypes.DOMCharacterDataModified,
302
+ topDrag: SimpleEventPlugin.abstractEventTypes.drag,
303
+ topDragEnd: SimpleEventPlugin.abstractEventTypes.dragEnd,
304
+ topDragEnter: SimpleEventPlugin.abstractEventTypes.dragEnter,
305
+ topDragExit: SimpleEventPlugin.abstractEventTypes.dragExit,
306
+ topDragLeave: SimpleEventPlugin.abstractEventTypes.dragLeave,
307
+ topDragOver: SimpleEventPlugin.abstractEventTypes.dragOver,
308
+ topDragStart: SimpleEventPlugin.abstractEventTypes.dragStart,
309
+ topDrop: SimpleEventPlugin.abstractEventTypes.drop
310
};
311
312
module.exports = SimpleEventPlugin;