Drag and drop - Verify answers

Question

How can I create a button (like the reset button) that checks if the elements are drop in the right place? In ascending order in this case.

<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

If all your dropped elements are within a parent, an array of child elements could be returned in the order they appear within the DOM tree. The indices of each child element in the array should reflect the way those elements were rearranged and dropped.

parent = document.getElementById('parent');

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

At that point, you could loop through the array to see if each element matches with the correctly ordered elements.