拖放 - 验证答案答案

【问题标题】：Drag and drop - Verify answers拖放 - 验证答案
【发布时间】：2021-06-24 18:33:51
【问题描述】：

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

<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;
}

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;
};

【问题讨论】：

标签： javascript html css drag-and-drop

【解决方案1】：

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

parent = document.getElementById('parent');

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

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

【讨论】：

非常感谢！