javascript - 在 Firefox 中拖动元素时出现问题

Question

即使属性 draggable="true"，图像在 Firefox 中也无法拖动，是否有任何原因？我正在 JS 中设计一个图像交换脚本，但在 Firefox 中运行它时遇到一些问题。虽然代码在 Chrome、Edge 和 IE 中运行良好，但当我尝试在 Firefox 中拖放图像时，浏览器似乎不允许我拖动图像(不会出现重影图像)，因此我的拖动事件没有触发或触发任何放置事件。我通过 document.createElement('img') 生成图像并使用

设置属性

imgElement.setAttribute('draggable', true);
imgElement.setAttribute('ondragstart', 'drag(event)');

我的拖动功能:

function drag(ev) {
 if (!ev.target.classList.contains(clickClass)) {
  return;
 }

 ev.dataTransfer.setData("text", ev.target.id);
 document.getElementById(ev.target.id).parentElement.setAttribute('class', 'noclick');
};

我在另一个问题中读到，如果数据未传输，则拖动事件可能不会在 Firefox 中触发，但是，这似乎不是这里的问题。

Answer 1

您应该添加 dragstart 监听器，而不是 imgElement.setAttribute('ondragstart', 'drag(event)');:

imgElement.addEventListener('dragstart', function(e){
    drag(e);
});