Question

我正在使用w3中的js-html代码来实现拖放功能。

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>

想法是在每个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内部进行删除？

Answer 1

你可以用drop方法

致电getChildrenByTagName(target,"img")

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

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

检查此函数是否返回标记名为img

的子项

如果是，则不要附加新孩子

拖放HTML，防止图像在其他图像中丢失

1 个答案: