时间戳

首页 > 解决方案 > 在“Drop”事件中删除 CSS 类 - JavaScript

javascript - 在“Drop”事件中删除 CSS 类 - JavaScript

问题描述

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

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

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>

标签： javascripteventsdrag-and-dropdrop

解决方案

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

e.preventDefault();

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

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 - 指定放置目标

推荐阅读