检查 div 是否包含图像(HTML5 拖放)

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

可能会在丢弃时执行此操作，但是没有任何反应。图像首先在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;
}

完整 CSS http://jsfiddle.net/fSUNX/

你的代码在 #answer 中查找#target，当你想要它时

。

试试这个：

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

这是根据问题中的片段构建的游戏的完整版本。它似乎执行了所需的拖放操作，并且还可以识别正确的答案，并在将正确的图像拖入正确的框中时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>

相关内容

最新更新

热门标签：