Javascript 拖放HTML，防止图像拖放到其他图像中

我正在使用w3的JSHTML代码来实现拖放功能

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

<img id = 'i1' src = 'image1.png' draggable="true" ondragstart="drag(event)" alt='' />
<img id = 'i2' src = 'image2.png' draggable="true" ondragstart="drag(event)" alt='' />

<div id = 'fill1' ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id = 'fill2' ondrop="drop(event)" ondragover="allowDrop(event)"></div>

功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}

想法是在每个div中放置一个图像；但是，当我试图将两个图像放在一个div中时，它会将第二个图像放在第一个图像中，如下所示：

<div id="fill1" ondragover="allowDrop(event)" ondrop="drop(event)">
    <img id="i1" alt="" ondragstart="drag(event)" draggable="true" src="image1.png">
        <img id="i2" alt="" ondragstart="drag(event)" draggable="true" src="image2.png">
    </img>
</div>

---

是否可以直接阻止这种行为，或者，例如，通过防止在已经有一个子元素的div中拖放来阻止这种行为？

您可以在拖放方法中这样做

调用getChildrenByTagName（目标，“img”）

（添加的函数仅供参考，您不需要定义它，实际上可以在javascript中使用）

函数getChildrenByTagName（父项，标记名）{
var all_children=parent.childNodes；
var new_children=新数组（）；
对于（var i=0，j=0；i
function getChildrenByTagName(parent,tag_name) {
    var all_children = parent.childNodes;
    var new_children = new Array();
    for (var i=0, j=0; i<all_children.length; i++) {
        if (all_children[i].tagName && (all_children[i].tagName.toLowerCase() == tag_name.toLowerCase())) {
            new_children[j] = all_children[i];
            j++;
        }
    }
    return new_children;
}