HTML Drag/Drop API - 拖动后消失答案

【问题标题】：HTML Drag/Drop API - Disappear after DragHTML Drag/Drop API - 拖动后消失
【发布时间】：2020-07-31 18:06:23
【问题描述】：

我正在使用 W3schools 建议的 HTML Drag/Drop API (w3schools html drag/drop api)

我正在尝试将物体从一个袋子移到另一个袋子。

到目前为止一切正常，除非我以某种方式误点击并将一张图片拖到另一张图片上（而不是拖到 div 中的可用空间中）。

然后丢弃的图片正在消失。当我检查 html 代码时，我可以看到丢弃的 img 位于第一个 img 之下。

我猜可能是因为 js 代码中的“子”元素。这就是我需要帮助的地方。

如何防止这种情况，所以我只能将图像放入 div 而不能放入其他图像？

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

#div1, #div2 {
  float: left;
  width: 100px;
  height: 350px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Bag1
  <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">Bag2
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</div>

</body>
</html>

【问题讨论】：

标签： html api drag drop

【解决方案1】：

刚刚找到答案...

将drop函数改为：

function drop(ev, el) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  el.appendChild(document.getElementById(data));
}

当你调用函数时：

<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)">

就是这样。在这里找到答案：prevent drop inside a child element when drag & dropping with JS

【讨论】：