Question

我有一个用于拖放功能的事件列表列表。

td.addEventListener('dragenter', onDragEnter);
td.addEventListener('dragleave', onDragLeave);
td.addEventListener('dragover', onDragOver);
td.addEventListener('drop', onDrop);

在firefox中，放下某项时不会触发drop事件。 dragenter，dragover和dragleave所调用的函数均会阻止默认操作（从http://mereskin.github.io/dnd/复制）：

const onDragEnter = e => {
  onDragOver(e);
  console.log('onDragEnter:');
  if(e.target.nodeType == 1) {
    e.target.className = 'drop-over';
}  };

const onDragOver = e => {
  console.log('onDragOver:');
  if(e.target.nodeType == 1) {
    e.dataTransfer.dropEffect = e.target.getAttribute('data-drop-effect');
    e.preventDefault();
    e.stopPropagation();
}  };

在http://mereskin.github.io/dnd/上，所有事件似乎都起作用（尝试使用相同的方法，事件监听器等）。可拖动项具有以下特定属性：

let img = document.createElement('img');
img.src = `icons/${obj._image}`;
img.setAttribute('draggable','true');

在Chrome浏览器中，它可以在我和链接的网站上完美运行。

编辑：Tried Edge也可以，但效果很好。在另一台机器上也尝试过FF，结果相同。为演示创建了一个jsfiddle：https://jsfiddle.net/as965dkz/6/

Answer 1

我发现，Firefox要求在dataTransfer.setData()事件中设置dragstart。然后，在放置事件上必须调用e.preventDefault();。

Firefox事件未触发

1 个答案: