38

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?

Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
RandallB
  • 5,415
  • 6
  • 34
  • 47

5 Answers5

36

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.

Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
Carson Holmes
  • 385
  • 3
  • 6
  • 6
    with `event.dataTransfer.setData('text/html', 'anything')` it will not jump to anything.com – pykiss Jan 31 '17 at 16:28
  • for anyone else fighting with drag and drop on FF, this will probably be relevant to you as well, though unrelated to this particular issue: https://stackoverflow.com/questions/11656061/event-clientx-showing-as-0-in-firefox-for-dragend-event – Daniel Schaffer Dec 06 '17 at 19:21
  • 3
    Also, you need to specifically make sure you call preventDefault() on your drop event handler to prevent it from trying to navigate. Not sure what Mozilla was thinking when they did this awful implementation. – Daniel Schaffer Dec 06 '17 at 19:22
34

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.

RandallB
  • 5,415
  • 6
  • 34
  • 47
  • 2
    Use 'text' instead of 'text/plain' if you want it to work in IE. See http://stackoverflow.com/questions/12803235/drag-and-drop-not-working-in-ie-javascript-html5 – David Apr 27 '16 at 14:02
  • 1
    This works, but as of today, the MDN Drag documentation still says that a DragEvent has a dataTransfer property. No mention of having to reference originalEvent. – Lex Lindsey May 13 '16 at 18:16
  • 1
    @LexLindsey, the originalEvent is for jQuery as indicated in the answer. – Dave Clarke Dec 13 '16 at 12:54
  • 2
    So it is a bug in Firefox that force you to set a data on drag-start event. – Arashsoft Dec 15 '17 at 19:23
  • it works for me in React by `event.nativeEvent.dataTransfer.setData('text', 'anything')` in `onDragStart` prop. – Spark.Bao Jun 06 '18 at 03:48
6

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.

Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
user3795410
  • 61
  • 1
  • 1
2

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.

Community
  • 1
  • 1
Akhilesh Sehgal
  • 186
  • 3
  • 16
1

use this

IE:

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

Firefox:

event.dataTransfer.setData('text/plain', '');
bafuka
  • 11
  • 1