When dragging and dropping nodes, I want to ensure that only the dropped node is highlighted with a border. For example, if I drop nodeA, it should be highlighted. Then, when I drop nodeB, nodeB should be highlighted while nodeA is not.
Below is the function I wrote to achieve this:
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var nodeCopy = document.getElementById(data).cloneNode(true);
test++;
nodeCopy.id =test;
var newNodeId= nodeCopy.id;
ev.target.appendChild(nodeCopy);
document.getElementById(newNodeId).className += " draggeddStyle";
}
I am successful in highlighting the node using:
document.getElementById(newNodeId).className += " draggeddStyle;
However, after dragging another node, both nodes end up having the same style which is not desired.