使用 JavaScript 拖动到目标

Question

我有一份参议员名单，上面有名字和政党，这样

<senators>
<senator>
<name>Chuck Schumer</name>
<party>Democrat</party>
<vote>false</vote>
</senator>
<senator>
<name>Dick Durbin</name>
<party>Democrat</party>
<vote>false</vote>
</senator>

我想将它们拖到两个框中的 1 个，其中一个与派对匹配，另一个不匹配。我还没有确定是否可以将物品掉落在给定目标中的部分，因为我无法让它们落在任何目标中。有点问题。

在这里，我可能会忘记我的变量，但我正在使用很多控制台来尝试查看发生了什么，这对我来说没有任何意义，为什么这不起作用。

members = document.getElementById("members");
republicans = document.getElementById("republicans");
democrats = document.getElementById("democrats");
msg = document.getElementById("msg");
// Add event handlers for the sauce
members.ondragstart = dragStartHandler;
members.ondragend = dragEndHandler;
members.ondrag = dragHandler;
// Add event handlers for the target
democrats.ondragenter = dragEnterHandler;
democrats.ondragover = dragOverHandler;
democrats.ondrop = dropHandler;
republicans.ondragenter = dragEnterHandler;
republicans.ondragover = dragOverHandler;
republicans.ondrop = dropHandler;

function dragStartHandler(e) {
e.dataTransfer.setData("Text", e.target.id);
sourceId = e.target.id;     // explicitly for some browsers
e.target.classList.add("dragged");
}
function dragEndHandler(e) {
msg.innerHTML = "Drag ended";
var elems = document.querySelectorAll(".dragged");
for(var i = 0; i < elems.length; i++) {
elems[i].classList.remove("dragged");
}
}
function dragHandler(e) {
msg.innerHTML = "Dragging " + sourceId;
}
function dragEnterHandler(e) {
console.log("Drag Entering " + e.target.id + 
" source is " + e.dataTransfer.getData("Text") );
var id = e.dataTransfer.getData("Text") || sourceId;
if (id == "democrat") {
e.preventDefault();
}
}
function dragOverHandler(e) {
console.log("Drag Over " + e.target.id + 
" source is " + e.dataTransfer.getData("Text")) ;
var id = e.dataTransfer.getData("Text") || sourceId;
if (id == "democrat") {
e.preventDefault();
}
}
function dropHandler(e) {
console.log("Drop on " + e.target.id + 
" source is " + e.dataTransfer.getData("Text")) ;
var id = e.dataTransfer.getData("Text") || sourceId;
var sourceElement = document.getElementById(id);
var newElement = sourceElement.cloneNode(false);               
target.innerHTML = "";
target.appendChild(newElement);
e.preventDefault();}

Answer 1

Jquery UI 提供了draggable()和droppable()来拖动各种 DOM 元素。

您可以查看以下链接，清楚地解释其工作原理。

https://www.geeksforgeeks.org/jquery-ui-draggable-and-droppable-methods/https://codepen.io/salasks/pen/ojzvp