检查div是否包含图片(HTML5拖放) [英] Check if a div contains an image (HTML5 Drag and Drop)

问题描述

我用HTML5创建了一个简单的拖放游戏. 这些项目将按其应有的方式拖放，但是在拖放时，我希望它检查放置在答案框div中的图像是否符合javascript要求.

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:

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!");
}
}

可以直接进行此操作，但是什么也没有发生. 图像以div开头，图像本身的ID为answer1，正确的答案框当然为target1.

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.

以下是拖放操作的HTML:

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对于图片周围的div:

CSS For the div around the image:

#answer1Box
{
float:left;
width: 125px;
height: 40px;
}

用于放置图像的答案框的CSS:

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/以获得完整的CSS

http://jsfiddle.net/fSUNX/ for full CSS

推荐答案

这是根据问题摘录构建的游戏的完整版本.它似乎执行了所需的拖放操作，并且在将正确的图像拖动到正确的框中时还标识了正确的答案和alerts.我已经在FF21和Chrome 29中运行了此

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

注意:当我第一次设置此功能时，由于我的<script>标记中有错字，所以jQuery库没有加载.我正在本地加载，所以省略了http:前缀.这样就产生了一种与所描述的行为相当的行为:将图像在DOM中移动到了正确的目标框，但是没有生成警报.一旦我更正了此页，页面就会按预期工作.我怀疑jQuery不在OP的本地版本中加载，这是他问题的核心

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

我在这里链接了Modernizr，因为OP表示他已经这样做了.它实际上没有做任何事情.不管有没有代码，此代码均适用.

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.

我没有对代码，CSS或HTML进行任何其他重大更改.

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>

这篇关于检查div是否包含图片(HTML5拖放)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！