删除“Drop”事件上的 CSS 类 - JavaScript

如何解决删除“Drop”事件上的 CSS 类 - JavaScript

我正在构建一个文件上传器，当我将文件拖到目标区域上时，我有一个在 dragover 上添加并在 dragleave 上删除的类。这实质上会更改拖放区的边框颜色，以便用户知道何时可以拖放文件。这是通过添加和删除“放置”类来完成的。

我试图做到这一点，当用户将实际文件放入拖放区时，drop 事件还会删除在拖动时添加的“拖放”类（因此边框恢复到原来的状态），但我不能让它工作？

代码笔是：https://codepen.io/emilychews/pen/OJpwzej

非常感谢任何帮助。

var dropZone = document.getElementById("drop-zone");

// change border on file dragover by adding the class "drop"
dropZone.addEventListener(
  "dragover",function (e) {
    e.target.classList.add("drop");
  },false
);

// remove border by removing the class "drop" when user leaves the drop zone
dropZone.addEventListener(
  "dragleave",function (e) {
    e.target.classList.remove("drop");
  },false
);

// -- PART THAT ISN'T WORKING
// also remove border by removing the class "drop" when files are dropped
dropZone.addEventListener(
  "drop",false
);

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inner-drop-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border: 1px solid;
}

.inner-drop-wrapper.drop {
  border: 2px solid red;
}

<div class="inner-drop-wrapper" id="drop-zone">
  Drag and drop files here
</div>

解决方法

您必须允许删除您的 div。为此，您需要添加

e.preventDefault();

作为拖动回调函数的第一行。这将使您的放置事件能够正确触发。

var dropZone = document.getElementById("drop-zone");

// change border on file dragover by adding the class "drop"
dropZone.addEventListener(
  "dragover",function (e) {
    e.preventDefault();
    console.log('dragover');
    e.target.classList.add("drop");
  },false
);

// remove border by removing the class "drop" when user leaves the drop zone
dropZone.addEventListener(
  "dragleave",function (e) {
    console.log('dragleave');
    e.target.classList.remove("drop");
  },false
);

// -- PART THAT ISN'T WORKING
// also remove border by removing the class "drop" when files are dropped
dropZone.addEventListener(
  "drop",function (e) {
    e.preventDefault();
    console.log('drop');
    e.target.classList.remove("drop");
  },false
);

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inner-drop-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border: 1px solid;
}

.inner-drop-wrapper.drop {
  border: 2px solid red;
}

<div class="inner-drop-wrapper" id="drop-zone">
  Drag and drop files here
</div>

来自 MDN 文档

如果要允许放置，则必须通过取消 dragenter 和 dragover 事件来阻止默认处理。您可以通过从属性定义的事件侦听器返回 false 或调用事件的 preventDefault() 方法来执行此操作。在单独的脚本中定义的函数中，后者可能更可行。

MDN - Specifying Drop Targets