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

ドロップ時にこの操作を実行する可能性がありますが、何も起こりません。画像はまず 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/

4

2 に答える 2