拖放HTML，防止圖像掉入其他圖像

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

你可以在你滴法

呼叫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

如果是，則不要追加新的兒童