javascript - 拖放 - 验证答案
问题描述
如何创建一个按钮(如重置按钮)来检查元素是否放置在正确的位置?在这种情况下按升序排列。
<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;
};
解决方案
如果您删除的所有元素都在父元素中,则可以按照它们在 DOM 树中出现的顺序返回一组子元素。数组中每个子元素的索引应该反映这些元素重新排列和删除的方式。
parent = document.getElementById('parent');
children_array = [...parent.querySelectorAll('.child')];
此时,您可以遍历数组以查看每个元素是否与正确排序的元素匹配。
推荐阅读
- html - 如何打破传递给 setCustomValidity (HTML5) 的文本
- postgresql - 9.6 升级后 postgresql IN 查询出现奇怪的性能问题
- javascript - 如何使用 Node JS 作为后端来设置 AngularJS 工作区
- django - 在 django 查询集中获取反向相关模型的字段值
- wso2 - WSO2 企业集成商密钥库
- php - 使用 Php 将嵌套 JSON 插入 mySQL
- php - 如何在我的注册表单中修复此错误
- node.js - Heroku 节点 js 部署问题:Web 进程在启动后 60 秒内无法绑定到 $PORT
- reference - 参考循环的实际例子是什么?
- node.js - Firebase Google 登录异常。内部错误:对 API 的请求被阻止