javascript - 使多个元素在放置时可见

Question

我有一个代码，其中 id 为 drag1、drag2、drag3 的三个图像 src 每个都可以拖放到 div1..

我的问题是，在删除第二个和第三个图像时，它在 #div1 中不可见

如何使第二个和第三个图像在放置时可见？

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 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="336" height="69">

Answer 1

实际上，您的实际代码没有问题，并且它对于 3 个图像的行为方式相同。

问题是您的 div 的 height 只有 70px，因此只有第一个图像可见，而后两个元素位于div 但未显示在屏幕上，您可以通过更改 div height 或使其随内容拉伸(stretch)来解决此问题。

演示:

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 {
  width: 350px;
  height: 370px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://picsum.photos/200" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="https://picsum.photos/200/300?image=0" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag3" src="https://picsum.photos/200/300/?gravity=east" draggable="true" ondragstart="drag(event)" width="336" height="69">