如何添加一个可拖放的目标id到if语句来检查正确的答案

Javascript Drag and drop How to add a droppable target id into if statement to check correct answers?

本文关键字：if 答案 语句 id 检查 拖放 添加 何添加 一个 目标      更新时间：2023-09-26

我正在javascript中做一个拖放任务。这个想法是将三个可能的答案中的任何一个拖到特定的目标区域(例如，测量1行1等)。在"升G"的情况下，可能有2个正确答案。我尝试实现一个控制结构来检查正确答案。到目前为止，我只有条件语句的第一部分:它检查可拖动id。我如何添加条件语句的第二部分来检查可删除的id?例如，只有在以下情况下才应考虑正确答案:

draggable id (data) == "measure_1_sharp" AND dropgable id (dropTarget) == "m_1_l_1.5" OR "m_1_l_5.5".

到目前为止，我有以下代码草案:

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)">&#x266F O</li>    
<li class = "measure_1 button_small" id = "measure_1_flat O" draggable="true" ondragstart="drag(event)">&#x266D 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>

我希望我正确理解了这个问题。(我的英语不是很好，我的答案很简单:-D)

在函数中已经有了dropTarget。(参见drop函数的参数:ev和target。)参数target是你的dropTarget。

所以你可以通过使用

来获取dropTarget id
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")) {
       ...
相关文章：