Javascript Drag and drop How to add a droppable target id into if statement to check correct answers?
Question
I am working on a drag and drop task in javascript. The idea is to drag any one of three possible answers to certain target areas (eg measure 1 line 1 etc). There could be 2 correct answers in case of "G sharp". I try to implement a control structure to check correct answers. So far I have only 1st part of conditional statement : it checks draggable id. How can I add 2nd part of conditional statement to check droppable id? For example the correct answer should be considered only if:
draggable id (data) == "measure_1_sharp" AND droppable id (dropTarget) == "m_1_l_1.5" OR "m_1_l_5.5".
So far I have the following draft code:
http://jsfiddle.net/L5tgokfj/5/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/main_css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<body>
<div id="m_1_l_5.5" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#fff;">measure 1 line 5.5
</div>
<div id="m_1_l_5" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#007fff;">measure 1 line 5
</div>
<div id="m_1_l_4.5" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#fff;">measure 1 line 4.5
</div>
<div id="m_1_l_4" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "other measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#907f99;">measure 1 line 4
</div>
<div id="m_1_l_3.5" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#fff;">measure 1 line 3.5
</div>
<div id="m_1_l_3" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "other measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#e00e97;">measure 1 line 3
</div>
<div id="m_1_l_2.5" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#fff;">measure 1 line 2.5
</div>
<div id="m_1_l_2" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "other measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#eeef97;">measure 1 line 2
</div>
<div id="m_1_l_1.5" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#fff;">measure 1 line 1.5
</div>
<div id="m_1_l_1" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#15ef97;">measure 1 line 1
</div>
<div id="m_1_l_0.5" ondrop="drop(event, this)" ondragover="allowDrop(event)" class= "g_sharp measure_1_grand_staff dropTarget_1" style="width:200px;height:25px; background-color:#fff;">measure 1 line 0.5
</div>
<div id = "question_1_a_notes">
<ul class="note_1_a_inline">
<li id = "q_1_a_note_1">G sharp</li>
</ul>
</div>
<div class = "additional_instructions" id = "task_1_a">Click a note and accidental (if needed) and drag-and-drop it to an appropriate place on the staff.
</div>
<div id="navcontainer_1a">
<ul id = "button_list">
<li class = "measure_1 button_small" id = "measure_1_note" draggable="true" ondragstart="drag(event)">O</li>
<li class = "measure_1 button_small" id = "measure_1_sharp" draggable="true" ondragstart="drag(event)">♯ O</li>
<li class = "measure_1 button_small" id = "measure_1_flat O" draggable="true" ondragstart="drag(event)">♭ O</li>
</ul>
</div>
<script>
var totalCorrectAnswers = 0;
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev,target) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text/html");
ev.target.appendChild(document.getElementById(data));
if(data=="measure_1_sharp") {
console.log(data);
console.log(dropTarget.id);
totalCorrectAnswers ++;
console.log("You have provided " + totalCorrectAnswers + " correct answer(s)");
} else {
console.log(data);
console.log("Wrong!!!");
console.log(dropTarget.id);
}
}
$(document).ready(function() {
}); // end ready
</script>
</div>
</body>
</html>
1 answers
solution1
1 2015-07-31 05:36:42
I Hope I understand the question correctly. (My english is not that good and my answer is very simple :-D )
You have already your dropTarget in your function. (See the parameter of the function "drop": ev and target.) The parameter target is your dropTarget.
So you can get the dropTarget id by using:
function drop(ev,target) {
ev.preventDefault();
var dropTarget = target;
...
if(data=="measure_1_sharp"
&& (dropTarget.id=="m_1_l_1.5" || dropTarget.id=="m_1_l_5.5")) {
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.