我正在尝试将我的jQuery代码转换为Vanilla JS解决方案：它与jQuery一起工作，但当我尝试将其与vanilla JS切换时出现问题
完美的工作代码：

function readURL(input) {
  if (input.files && input.files[0]) {
    let reader = new FileReader();
    reader.onload = function(e) {
      let listIcon = e.target.result;
      document.getElementById("list-image").src = listIcon;
      document.querySelector(".image-upload-wrap").classList.remove("image-dropping");
    };
    reader.readAsDataURL(input.files[0]);
  }
}

let dragTimer;
$(document).on("dragover",
function(e) {
  let dt = e.originalEvent.dataTransfer;
  if (dt.types && (dt.types.indexOf ? dt.types.indexOf("Files") != -1 : dt.types.contains("Files"))) {
    document.querySelector(".image-upload-wrap").classList.add("image-dropping");
    window.clearTimeout(dragTimer);
  }
});
$(document).on("dragleave",
function(e) {
  dragTimer = window.setTimeout(function() {
    document.querySelector(".image-upload-wrap").classList.remove("image-dropping");
  },
  25);
});

字符串
不起作用的代码。我正在使用JS addEventListener，也许这就是问题所在。我在最后添加了工作codepen，它可以工作（但使用jQuery）

let dragTimer;
document.addEventListener("dragstart",
function(e) {
  ev.dataTransfer.setData("image", e.target.id);
});
document.addEventListener("dragover",
function(e) {
  e.preventDefault();
  let dt = e.originalEvent.dataTransfer;
  if (dt.types && (dt.types.indexOf ? dt.types.indexOf("Files") != -1 : dt.types.contains("Files"))) {
    document.querySelector(".image-upload-wrap").classList.add("image-dropping");
    window.clearTimeout(dragTimer);
  }
});
document.addEventListener("dragleave",
function(e) {
  e.preventDefault();
  dragTimer = window.setTimeout(function() {
    document.querySelector(".image-upload-wrap").classList.remove("image-dropping");
  },
  25);
});

型
Working Codepen