[英]How can I check to see if a div contains an image element in JavaScript? (Not like a background image, like the element contained)
I have a fairly simple program which moves a picture of a house between 6 different tiles.我有一个相当简单的程序,可以在 6 个不同的瓷砖之间移动房屋的图片。 The goal here is as follows:这里的目标如下:
Here's my code:这是我的代码:
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>
No jQuery or libraries please请不要使用 jQuery 或库
In your drop function, check if event currentTarget
contains any img
tags:在 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/ https://jsfiddle.net/xmdkj0y4/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.