Firefox on drag end is not called in a react component

Question

I am trying to implement a really basic drag and drop functionality with the HTML5 drag and drop api inside a React component. I need only to get notified when the drag started and when ended. While this works fine in Chrome and IE11 I don't get any notification for drag end in latest firefox. You can see an example here

http://jsbin.com/lifico/edit?js,console,output

Any ideas?

Answer 1

In Firefox you need to set some data in the dataTransfer member of the event when the drag start. In your case you can just set an empty string:

onDragStart={(e) => {
             e.dataTransfer.setData('text',''); 
             console.log('drag start');}}

See the MDN documentation.