firefox ondrop event.dataTransfer is null after update to version 52

Question

Introduction:

At about mid March 2017, after an update of firefox to version 52, certain functions - drop and paste - ceaced to function properly. As it shows up on debugging, the attribute "dataTransfer" of the event is nowadays set to null.

Previously to the update, onDrop and onPaste events both delivered the dataTransfer attribut set to the contents of what were to be dropped or pasted.

Questions:

How should drop and paste be handled with actual browsers? Are there any precautions necessary these days? Is there an explanation out there of the reasons behind the restrictive behavior of nowadays?

Is there any example out there in the internet showing how to accomplish the task with actual browsers?

I do not ask for examples prior to version 48 of firefox, since at least until that version, the whole thing worked flawlessly. I do not ask for examples with jQuery or any other library (while not rejecting those if they come as additional supplements). I do ask for examples with simple plain native javascript.

Answer 1

When debugging step by step, the data from dataTransfer seems to get lost. Probably because of the events involved in debugging. Start the step-by-step debugging after the reading of dataTransfer (ev.dataTransfer.getData), and you will see that dataTransfer is not null anymore.

Answer 2

With the latest version of FF (currently 73.0.1) dataTransfer appears as null only when debugging the drop event handler (that is, via breakpoint or debugger statement). Not debugging the function makes it work properly.

Answer 3

I came across with similar issue.

We need to set few properties value to dataTransfer.

for example set eventObj.dataTransfer.effectAllowed = "move"; along with eventObj.dataTransfer.setData("text", "data"); in your dragstart function.

  function dragStart(eventObj) {
    eventObj.dataTransfer.setData("text",  "data");
    eventObj.dataTransfer.effectAllowed = "move";
  }

you have to prevent default action of an element from happening. by using eventObj.preventDefault(); and need to set eventObj.dataTransfer.dropEffect = "move"; in your dragover function like.

function dragOver(eventObj) {
    eventObj.preventDefault();
    eventObj.dataTransfer.dropEffect = "move";
  }

In drop function also you have to stop default action otherwise firefox will open new page with whatever data you have passed in dataTransfer api.

 function drop(eventObj) {
    vardata = eventObj.dataTransfer.getData("text");
    eventObj.preventDefault();
}

I hope it will solve your issue in firefox.

Happy coding