1

我用 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

4

2 回答 2

3

当您想要它以另一种方式时，您的代码会查找#targetin 。#answer

尝试这个：

if($('#target1').find('#answer1').length == 1)
{
  alert("CORRECT!");
}
于 2013-06-19T21:23:27.157 回答
0

这是根据问题中的片段构建的游戏的完整版本。它似乎执行了所需的拖放操作，并且还识别了正确的答案以及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>
于 2013-06-20T03:16:55.677 回答