使用AJAX和JSON从XML文件中拖放列表
使用AJAX和JSON从XML文件中拖放列表
提问于 2017-07-18 03:24:17
我有一个网页，它的列表存储在XML文件中。我需要能够将XML文件的内容(美国参议员列表)加载到JSON对象中，加载到网页上的无序列表中，并将每一行内容拖到两个删除区域(民主党人和共和党人)之一。当你拖动一个民主党人的时候，它应该只会掉进民主党人的下降区，而共和党人也是如此。我无法加载XML列表，但我的代码尚未完成。我需要帮助，使列表加载，并使其中的项目在最少的每一个是可拖的，并只能下降到他们各自的下降区域。以下是我到目前为止所拥有的：
<!doctype html>
<html>
<head>
<title>Assignment 2 Part 2</title>
<meta charset="utf-8">
<script src="partyWise.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Time to Vote</h1>
<p>Drag members to either the Democrats or Republicans list.</p>
<div id = "polList">
</div>
<div id="dems">Democrats:</div>
<div id="reps">Republicans:</div>
</body>
</html>JavaScript:
window.onload = init;
function init() {
polList = document.getElementById("polList");
dems = document.getElementById("dems");
reps = document.getElementById("reps");
polList.ondragStart = dragStartHandler;
polList.ondragend = dragEndHandler;
polList.ondrag = dragHandler;
}
function dragStartHandler(e) {
e.target.classList.add("dragged");
}
function dragEndHandler(e) {
e.target.classList.remove("dragged");
dems.innerHTML = "Drop Here";
reps.innerHTML = "Drop Here";
}
function dragHandler(e) {
msg.innerHTML = "Dragging " + e.target.id;
}
function loadPols() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("polList").innerHTML = this.responseText;
}
};
xhttp.open("GET", "senators", true);
xhttp.send();
}XML
<senators>
<senator>
<name>Orrin Hatch</name>
<party>Republican</party>
</senator>
<senator>
<name>Chuck Schumer</name>
<party>Democrat</party>
</senator>
<senator>
<name>Lisa Murkowski</name>
<party>Republican</party>
</senator>
<senator>
<name>Dianne Feinstein</name>
<party>Democrat</party>
</senator>
<senator>
<name>John Boozman</name>
<party>Republican</party>
</senator>
<senator>
<name>Michael Bennet</name>
<party>Democrat</party>
</senator>
<senator>
<name>Joni Ernst</name>
<party>Republican</party>
</senator>
<senator>
<name>Elizabeth Warren</name>
<party>Democrat</party>
</senator>
<senator>
<name>Roger Wicker</name>
<party>Republican</party>
</senator>
<senator>
<name>Al Franken</name>
<party>Democrat</party>
</senator>
</senators>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-18 05:06:00
您可以在data-*元素上设置一个<li>属性，其中父元素<ul>将.className设置为应该删除元素的元素的id。在dragstart事件中，将event.dataTransfer设置为元素.tagName和data-*属性的文本。
在drop事件获取event.dataTransfer时，查询document中的元素。如果元素.className等于event.target.id，则将<li>附加到具有id匹配的拖动元素.parentElement .className的<ul>中，否则调用不允许在event.target处删除元素的event.preventDefault()。
const xml = `<senators>
<senator>
<name>a</name>
<party>true</party>
</senator>
<senator>
<name>b</name>
<party>false</party>
</senator>
<senator>
<name>c</name>
<party>true</party>
</senator>
<senator>
<name>d</name>
<party>false</party>
</senator>
<senator>
<name>e</name>
<party>true</party>
</senator>
<senator>
<name>f</name>
<party>false</party>
</senator>
<senator>
<name>g</name>
<party>true</party>
</senator>
<senator>
<name>h</name>
<party>false</party>
</senator>
<senator>
<name>i</name>
<party>true</party>
</senator>
<senator>
<name>j</name>
<party>false</party>
</senator>
</senators>`;
const TRUE_OR_FALSE = bool => !new Function(`return ${bool}`)();
let template = document.createElement("template");
template.innerHTML = xml;
let nodes = template.content.firstElementChild.children;
for (let {children} of Array.from(nodes)) {
let node = Array.from(children);
let [n, p] = [node.find(({tagName}) => tagName === "NAME")
, node.find(({tagName}) => tagName === "PARTY")];
let [text, bool] = [n.textContent, p.textContent];
let [ul] = document.getElementsByClassName(bool);
ul.innerHTML += `<li data-${bool}="${ul.children.length}">${text}</li>`;
}
const trueOrFalse = document.querySelectorAll("ul:not([id])");
const drop = document.querySelectorAll("#true, #false");
trueOrFalse.forEach(function(el) {
el.childNodes.forEach(function(li) {
if (li.tagName === "LI") {
li.draggable = true;
el.ondragstart = function(e) {
let data = e.target.dataset;
let [key] = Object.keys(data);
let prop = data[key];
let selector = e.target.tagName
+ "[data-" + key + "=\"" + prop + "\"]";
e.dataTransfer.setData("text/plain", selector);
e.dropEffect = "move";
}
}
});
});
drop.forEach(function(el) {
el.ondragover = function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
}
el.ondrop = function(e) {
let selector = e.dataTransfer.getData("text");
let li = document.querySelector(selector);
let bool = li.parentElement.className;
if (bool === e.target.id) {
e.target.appendChild(li);
} else {
alert(`${bool} !== ${TRUE_OR_FALSE(bool)}`);
e.preventDefault();
}
}
});#true,
#false {
width: 100px;
height: 100px;
border: 2px dotted green;
padding: 4px;
list-style: none;
}
#true:before {
content: "true";
color: blue;
font-style: italic;
font-weight: bold;
}
#false:before {
content: "false";
color: orange;
font-style: italic;
font-weight: bold;
}<ul class="true">
</ul>
<ul class="false">
</ul>
<ul id="true"></ul>
<ul id="false"></ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45156947
复制相关文章
相似问题
腾讯云开发者
