HTML5API中只有一个徽标；拖放“；箱

因为它现在放在那里，每个标志都会放在盒子里，但是如果有多个标志放在那里，只有第一个标志会显示出来。是否有一种方法可以（a）只允许一个徽标进入框内，使其他徽标无法掉落在框内，或者（b）在第一个徽标进入框内后，如果将不同的徽标放入框内，则第一个徽标将替换为第二个（或第三个，或第四个，等等）选项b将是首选方法

<script>
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));
}
</script>

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

<img id="drag1" src="pagepics/Avengers_Logo.png" draggable="true"ondragstart="drag(event)" alt="Avengers Logo"  width="200" height="100">
<img id="drag2" src="pagepics/Ghostbusters.png" draggable="true" ondragstart="drag(event)" alt="Ghostbusters Logo"  width="200" height="100">
<img id="drag3" src="pagepics/ResidentEvil.png" draggable="true" ondragstart="drag(event)" alt="Resident Evil Logo" width="200" height="100">

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
 }

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
#第一组{
宽度：350px；
高度：70像素；
填充：10px；
边框：1px实心#AAAAA；
}

为了澄清，当放置多个徽标时，所有徽标/图像都会显示出来。但是，目标框的高度仅为70px，因此图像似乎不在其中

也就是说，以下解决方案将在您添加新徽标时替换徽标

最后一点注意，默认情况下，图像和链接是可拖动的，因此无需添加可拖动属性

希望这有帮助

函数allowDrop（事件）{
event.preventDefault（）；
}
函数拖动（事件）{
event.dataTransfer.setData（“text/plain”，event.target.id）；
}
函数删除（事件）{
event.preventDefault（）；
var src=document.getElementById（event.dataTransfer.getData（“text/plain”）；
var srcParent=src.parentNode；
var itm=event.currentTarget.firstElementChild；
event.currentTarget.replaceChild（src，itm）；
srcParent.appendChild（itm）；
}

#第1部分{
宽度：350px；
高度：100px；
填充：10px；
边框：1px实心#AAAAA；
保证金：5px；
}
img{
利润率：0.5px；
}
.盒子{
位置：相对位置；
浮动：左；
}

在盲目添加删除的元素之前，您是否考虑过检查删除目标是否有子元素？@enhzflep我从w3schools获得的初始代码，然后对其进行了轻微修改，以便可以选择拖放什么。当我测试它时，我发现可以将多个徽标放入框中，而只有第一个真正显示出来。从代码中我可以看出，没有孩子，但我不会发誓，像这样的事情总是有帮助的。不过我有一个问题——如果不需要draggable属性，为什么代码中会包含它？也许他们只是在以身作则。但是他们提到了HTML拖放API中图像和链接的默认可拖动性：。如果你把它包括进去，肯定不会有什么坏处。如果这有帮助，请确保向上投票并标记为已回答！这可能要求太多了，但是否有一种方法可以使如果将一个图像拖动到框中，然后将另一个图像拖动到框中，第一个图像返回到其开始位置？根据您的使用情况，您可以调整父节点以获得所需的结果。我稍微编辑了答案，这样每个徽标都可以与添加的图像交换位置，而不是简单地附加到单个父节点的末尾。