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 :(

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 :(

• javascript
• html
• firefox
• drag-and-drop
• html5-canvas

• dragenter and dragover both use drag_over. Is that intended? Or is it a typo? – jww Commented Dec 27, 2014 at 5:07

2 Answers 2

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.

In Firefox you have to cancel the event on drag dragover:

function dragstart(e) {
    e.preventDefault();
    e.stopPropagation();     /// add this too

    console.log("dragstart");
}

function drag_over(e) {
    e.preventDefault();
    e.stopPropagation();     /// add this too

    console.log("dragover");
    return false;
}

See if that works for you!