Question

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

用于处理拖放事件的Javascript：

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

可能会在drop下执行此操作，但没有任何反应。图像位于div的开头，图像本身的ID为answer1，正确的答案框当然是target1。

下面是拖放的HTML：

<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：

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

应该删除图像的答案框的CSS：

#target1
{
width: 120px;
height: 38px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
}

http://jsfiddle.net/fSUNX/获取完整的CSS

Answer 1

您的代码在#target中查找#answer，当您需要它时。

试试这个：

if($('#target1').find('#answer1').length == 1)
{
  alert("CORRECT!");
}

Answer 2

这是根据问题中的片段构建的游戏的完整版本。它似乎执行拖放所需，并在正确的图像被拖入正确的框时识别正确的答案和alerts。我在FF21和Chrome 29中运行它

注意当我第一次设置时，由于我<script>标记中的拼写错误，jQuery库未加载。我在本地加载，我省略了http:前缀。这给出了与描述相似的行为：图像在DOM中移动到正确的目标框，但没有生成警报。一旦我更正了这个页面按预期工作。我怀疑jQuery没有加载到OP的本地版本中，这是他问题的核心

我在这里联系了Modernizr，因为OP表示他已经这样做了。它实际上并没有做任何事情。此代码可以使用或不使用它。

我不得不更改图像文件，因为我没有原件。

我没有对代码，CSS或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拖放）

2 个答案: