拖放 - 验证答案

Question

如何创建一个按钮（如重置按钮）来检查元素是否放置在正确的位置？在这种情况下按升序排列。

<div id="drag1">
<span class="destaque" id="59" draggable="true" ondragstart="drag(event)">59</span>
<span class="destaque"id="45" draggable="true" ondragstart="drag(event)">45</span>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<input type="button" value="Reset" id="reset" onclick="reset1();">

CSS

span.destaque {
  background-color: green;
  padding:1em
}
#div1 {
  width: 50px;
  height: 50px;
  border: 2px solid #1086af;
}

JS

function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}
function reset1(){
    var div1 = document.getElementById("drag1");
    div1.innerHTML= html;
}                
var html;
window.onload = function(){
    html = document.getElementById("drag1").innerHTML;
};

Answer 1

如果您放置的所有元素都在一个父元素中，则可以按照它们在 DOM 树中出现的顺序返回一个子元素数组。数组中每个子元素的索引应反映这些元素重新排列和删除的方式。

parent = document.getElementById('parent');

children_array = [...parent.querySelectorAll('.child')];

此时，您可以遍历数组以查看每个元素是否与正确排序的元素匹配。

拖放 - 验证答案

Drag and drop - Verify answers

html

javascript

css

drag-and-drop