在JS中未触发拖放事件

示例：https :

//jsfiddle.net/u3m4eazx/我有2个可拖动的图像和3个div，可在其中放置图像（$ dropZones）。

$dropZones.forEach($z => {
  $z.addEventListener('dragover', onDragOver);
  $z.addEventListener('dragleave', onDragLeave);
  $z.addEventListener('drop', onDrop);
});

Dragover和Dragleave事件触发并正常工作。我通过添加一个CSS类对div进行了悬停效果。

const onDragOver = e => {
  e.preventDefault;
  let id = e.target.dataset.id;
  let dropzone = document.querySelector(`.dropzone[data-id="${id}"]`);
  dropzone.classList.add('ready');
};

在dragleave事件中，我只是删除了该类。因此，它们运作良好。
但是drop事件不会触发。这是我在drop事件中拥有的

const onDrop = e => {
  console.log("Drop triggered");
  alert('Drop triggered');
};

有人知道为什么事件不会触发吗？