在Firefox中不起作用的dragenter,dragover和drop事件

Question

我的js文件中有以下代码

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);
}

在某些时候,我创建了一个像这样的可拖动元素

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

我有这样的回调:

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

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

问题是代码在chrome中运行良好但在firefox中运行不正常.在firefox中,dragstart回调被触发但不是其余的.无能:(

Answer 1

看来你必须调用.setData()你的dragstart函数来实际使它工作.

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

以下内容来自MDN文档:

在HTML中,除了图像,链接和选择的默认行为外,默认情况下不会拖动其他元素.所有XUL元素也都是可拖动的.为了使另一个HTML元素可拖动,必须做两件事:

• 在要进行可拖动的元素上将draggable属性设置为true.
• 为dragstart事件添加侦听器,并在此侦听器中设置拖动数据.