在 'Drop' 事件上移除 CSS Class - JavaScript

Question

我正在构建一个文件上传器，当我将文件拖到目标区域时，我有一个 class，它在 dragover 上添加并在 dragleave 上删除。这实质上改变了拖放区的边框颜色，以便用户知道他们何时可以拖放文件。这是通过添加和删除 'drop' class.

来完成的

我正在尝试做到这一点，以便当用户将实际文件放入拖放区时，drop 事件还会删除添加到 dragover 上的 'drop' class（所以边框会恢复到原来的状态），但我无法让它工作？

Codepen 是：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",
  function (e) {
    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>

Answer 1

您必须允许放入 div。为此，您需要添加

e.preventDefault();

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

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 文档

If you want to allow a drop, you must prevent the default handling by cancelling both the dragenter and dragover events. You can do this either by returning false from attribute-defined event listeners, or by calling the event's preventDefault() method. The latter may be more feasible in a function defined in a separate script.

MDN - Specifying Drop Targets

在 'Drop' 事件上移除 CSS Class - JavaScript

Remove CSS Class on 'Drop' Event - JavaScript

javascript

events

drag-and-drop

drop