Why doesn't HTML5 drag and drop work in Firefox?

Firefox requires that a user run the dataTransfer.setData function in the event.

For you jQuery users, that means the following code should resolve your issue:

function dragstartHandler(event){

  event.originalEvent.dataTransfer.setData('text/plain', 'anything');

}

Future events on the same drag will now properly fire as you expected. Obviously you can replace the setData arguments with more useful data.

I'm not using jQuery, so removed the originalEvent portion and changed the format to text (or IE had issue), and it works:

event.dataTransfer.setData('text', 'anything');  

In the drop event make sure to call:

event.preventDefault();

Or it will jump to anything.com.

FF has long standing issues with eating certain mouse events that originate from elements that have overflow set to auto or scroll.

In my case, I had a well used library for drag and drop that worked perfectly in the samples and in my app on every browser but firefox. After digging through the tickets related to this, I found a solution that I fully credit to a contributor to this ticket https://bugzilla.mozilla.org/show_bug.cgi?id=339293

which is to set -moz-user-select: none

on the scrolled element being dragged from. It solved my particular problem.