CODEWITHSUNDEEP
javascripthtmlfirefoxdrag-and-drophtml5-canvas
beNerd
beNerd

Reputation: 3374

dragenter, dragover and drop events not working in firefox

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

Upvotes: 5

Views: 11574

Answers (2)

Wojtek
Wojtek

Reputation: 455

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.

Upvotes: 11

user1693593
user1693593

Reputation:

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!

Upvotes: 2

Related Questions