如何在 JavaScript 中檢查 div 是否包含圖像元素？ （不像背景圖片，像包含的元素）

Question

我有一個相當簡單的程序，可以在 6 個不同的瓷磚之間移動房屋的圖片。 這里的目標如下：

• 當我將房子拖到一個空的草地牢房時，我希望房子移動到那個牢房。 （這已經在起作用了。）
• 當我將房屋拖到包含房屋的單元格上時，我希望發生一些特別的事情。 （調用函數）

這是我的代碼：

 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)); } function yeet() { alert("ekfui"); }

 .cell { border-radius: 10px; width: 100px; height: 100px; margin: 5px; padding: 5px; background-image: url("https://us.123rf.com/450wm/tuulijumala/tuulijumala1602/tuulijumala160200015/52473977-seamless-square-green-grass-texture-.jpg?ver=6"); }

 <!--What you actually see--> <div align="center"> <table> <tr> <td> <div id="gh" class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://worldartsme.com/images/free-house-clipart-1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="100px" height="100px"> </div> </td> <td> <div class="cell" ondrop="drop(event); yeet();" ondragover="allowDrop(event)"></div> </td> <td> <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </td> </tr> <tr> <td> <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </td> <td> <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="http://worldartsme.com/images/free-house-clipart-1.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="100px" height="100px"> </div> </td> <td> <div class="cell" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </td> </tr> </table> </div>

請不要使用 jQuery 或庫

Answer 1

在 drop 函數中，檢查事件currentTarget包含任何img標簽：

if (ev.currentTarget.querySelectorAll('img').length > 0) {
  alert('There\'s already a house there.');
} else {
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

https://jsfiddle.net/xmdkj0y4/