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 documentation：

在HTML中，除了图像，链接和的默认行为   选择，默认情况下没有其他元素可拖动。所有XUL   元素也是可拖动的。为了制作另一个HTML元素   可拖动，必须做两件事：


在要进行可拖动的元素上将draggable属性设置为true。

为dragstart事件添加侦听器，并在此侦听器中设置拖动数据。

Answer 2

在Firefox中，您必须在拖动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;
}

看看它是否适合你！

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

2 个答案: