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

Question

I have bound events to different elements, and when I drag them in all browsers, except Firefox, it works as expected. In firefox, however, it doesn't work at all. The only event that fires is dragstart, and none of the other events fire. What's going on?

Answer 1

I'm not using jQuery, so removed the originalEvent portion and changed the format to text (or IE had issues), 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.

Answer 2

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.

Answer 3

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

which is to set

-moz-user-select: none

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

Answer 4

You can use this as a reference for this question solution regarding the redirects that occur on Firefox.

You need to prevent the default action in drop method to fix this issue.

function drop(e) {
    if(e.preventDefault) { e.preventDefault(); }
    if(e.stopPropagation) { e.stopPropagation(); }

    //your code here

    return false;
}

I got this solution from this link.

Answer 5

use this

IE:

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

Firefox:

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