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

问题

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?

回答1:

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.

回答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.

回答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 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.

回答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.

回答5:

use this

IE:

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

Firefox:

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

来源：https://stackoverflow.com/questions/19055264/why-doesnt-html5-drag-and-drop-work-in-firefox

标签

html5

drag-and-drop