1

我正在使用 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>

4

1 回答 1

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)">

而已。在这里找到了答案：防止在使用 JS 拖放时放入子元素中

于 2020-07-31T18:25:52.430 回答