온라인 퀴즈에 드래그 앤 드롭 및 매칭 질문을 추가하는 방법

 
 这是问题的选项一 
  
 这是问题的答案一 

function allowDrop(event) { event.preventDefault(); // 阻止浏览器默认处理拖拽事件 } function drag(event) { event.dataTransfer.setData("text", event.target.innerHTML); // 将拖拽元素的数据保存到dataTransfer对象中 } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); // 获取拖拽元素的数据 event.target.innerHTML = data; // 将数据放置到拖拽目标中 }

 
问题一
 
问题二
 ... 
 
 
答案一
 
答案二
 ... 

function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.innerHTML); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); if (event.target.parentNode.id === "answers") { // 将答案放置到问题下面 var question = document.createElement("li"); question.innerHTML = data; question.draggable = true; question.ondragstart = drag; event.target.appendChild(question); } else if (event.target.parentNode.id === "questions") { // 将问题放置到答案下面 var answer = document.createElement("li"); answer.innerHTML = data; answer.ondrop = drop; answer.ondragover = allowDrop; event.target.appendChild(answer); } }