dragenter, dragover and drop events not working in firefox

Question

I have the following code in my js file

window.onload = function () {

    var canvas = document.getElementById('canvas');
    canvas.addEventListener('dragover', drag_over, false);
    canvas.addEventListener('dragenter', drag_over, false);
    canvas.addEventListener('drop', dropped, false);
}

And at some point I create a draggable element like this

element.addEventListener('dragstart', dragstart, false);

I have callbacks like this:

function dragstart(e) {
    console.log("dragstart");
}

function dropped(e) {
    console.log("dropped");
 }
function drag_over(e) {
    console.log("dragover");
    e.preventDefault();
    return false;
}

The problem is that the code works fine in chrome but not in firefox. In firefox, dragstart callback gets fired but not the rest of them. Clueless :(

Solution

It seems that you have to call .setData() in your dragstart function to actually make it work.

function dragstart(e) {
    console.log("dragstart");
    e.dataTransfer.setData('text/plain', 'dummy');
}

The following is from the MDN documentation:

In HTML, apart from the default behavior for images, links, and selections, no other elements are draggable by default. All XUL elements are also draggable. In order to make another HTML element draggable, two things must be done:

• Set the draggable attribute to true on the element that you wish to make draggable.
• Add a listener for the dragstart event and set the drag data within this listener.