使用JavaScript将CSS应用于放置区域中的活动放置元素

Question

我有几个可拖动的节点，放置后需要突出显示，只有放置的元素需要有边框。
例如：我放下nodeA，它将突出显示。 稍后当我放下nodeB时，则应该突出显示nodeB而不应该突出显示nodeA。

这是我编写的函数：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    test++;
    nodeCopy.id =test; /* We cannot use the same ID */
    var newNodeId= nodeCopy.id;
    ev.target.appendChild(nodeCopy);
    document.getElementById(newNodeId).className += " draggeddStyle";
}

我可以使用以下方法突出显示该节点：

document.getElementById(newNodeId).className += " draggeddStyle;

之后，如果我拖动另一个节点，则两个节点最终将具有相同的样式。

Answer 1

只需修改您的代码示例。

function drop(ev) {
    ev.preventDefault();
    $(".draggeddStyle").removeClass("draggeddStyle");/* added this line */
    var data = ev.dataTransfer.getData("text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    test++;
    nodeCopy.id =test; /* We cannot use the same ID */
    var newNodeId= nodeCopy.id;
    ev.target.appendChild(nodeCopy);
    document.getElementById(newNodeId).className += " draggeddStyle";
}

我认为这可行。