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 eve

Answer 1

use this

IE:

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

Firefox:

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

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

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 4

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.

Answer 5

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.