Check if a div contains an image (HTML5 Drag and Drop)
Question
I've created a simple drag and drop game with HTML5. The items drag and drop as they should, however on drop I would like it to check if the image that is placed within the answer box div matches a javascript requirement.
Javascript to handle Drag and Drop events:
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image = ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
if($('#answer1').find('#target1').length == 1)
{
alert("CORRECT!");
}
}
might carry out this operation on drop, however nothing happens. The image is within a div to start with, and the ID of the image itself is answer1 and the correct answer box is of course target1 .
Below is the HTML for the drag and drop:
<div id="answerBoxes">
<div id="target1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="target2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="target3" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="target4" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div> <!-- end of answerBoxes -->
<div id="whatsWhatContent">
<div id="answers">
<div id="answer1Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer1" src="Images/Icons/FlowerAnswer.png" draggable="true" ondragstart="drag(event)" alt="Flower answer box draggable"/>
</div>
<div id="answer2Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer2" src="Images/Icons/StemAnswer.png" draggable="true"
ondragstart="drag(event)" alt="Stem answer box draggable">
</div>
<div id="answer3Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer3" src="Images/Icons/RootAnswer.png" draggable="true" ondragstart="drag(event)" alt="Root answer box draggable">
</div>
<div id="answer4Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer4" src="Images/Icons/LeafAnswer.png" draggable="true" ondragstart="drag(event)" alt="Leaf answer box draggable">
</div>
CSS For the div around the image:
#answer1Box
{
float:left;
width: 125px;
height: 40px;
}
CSS for the answer box where the image should be dropped:
#target1
{
width: 120px;
height: 38px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
}
http://jsfiddle.net/fSUNX/ for full CSS
2 answers
solution1
3
Your code looks for #target in #answer , when you want it around the other way.
Try this:
if($('#target1').find('#answer1').length == 1)
{
alert("CORRECT!");
}
solution2
0 ACCPTED
Here's a complete version of the game built from the snippets in the question. It seems to perform the Drag-and-drop required, and also identifies the correct answer and alerts when the correct image is dragged into the correct box. I've run this in FF21 and Chrome 29
Note When I first set this up the jQuery library wasn't loading due to a typo in my <script> tag. I'm loading locally, and I'd omitted the http: prefix. This gave a behaviour much as described: the image was moved in the DOM to the correct target box, but no alert was generated. Once I corrected this the page worked as intended. I suspect that jQuery wasn't loading in the OP's local version and that this is at the heart of the his problems
I've linked Modernizr in here because the OP indicated that he'd done so. It's not actually doing anything. This code works with or without it.
I had to change the image files because I didn't have the originals.
I have made no other significant changes to the code, CSS or HTML.
<!doctype html>
<html>
<head>
<title>DND with alerts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#answer1Box,#answer2Box,#answer3Box,#answer4Box
{
float:left;
width: 125px;
height: 40px;
}
#target1, #target2, #target3, #target4
{
width: 120px;
height: 120px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
}
</style>
<script src="modernizr-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
ev.preventDefault();
var image = ev.dataTransfer.getData("content");
ev.target.appendChild(document.getElementById(image));
if($('#target1').find('#answer1').length == 1)
{
alert("CORRECT!");
} else {
alert("Wrong!");
}
}
</script>
</head>
<body>
<div id="answerBoxes">
<div id="target1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="target2" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="target3" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<div id="target4" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
</div> <!-- end of answerBoxes -->
<div id="whatsWhatContent">
<div id="answers">
<div id="answer1Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer1" src="fall1.png" draggable="true" ondragstart="drag(event)" alt="Flower answer box draggable"/>
</div>
<div id="answer2Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer2" src="files.png" draggable="true"
ondragstart="drag(event)" alt="Stem answer box draggable">
</div>
<div id="answer3Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer3" src="HOME.png" draggable="true" ondragstart="drag(event)" alt="Root answer box draggable">
</div>
<div id="answer4Box" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="answer4" src="web.png" draggable="true" ondragstart="drag(event)" alt="Leaf answer box draggable">
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.