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

Question

我有一个代码，其中三个带有 id 的图像 src ，drag1每个都可以拖放到..drag2drag3div1

我的问题是，在删除第二个和第三个图像时，它在 #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">

标签： javascripthtmldrag-and-drop

Answer 1

实际上，您的实际代码没有问题，并且与 3 的行为方式相同images。

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

演示：

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