Javascript 使用拖放操作DOM时的奇怪行为

我使用html5拖放来设置div被拖放的位置的一些值，但是有一些奇怪的行为我无法理解，也无法找到解决方案

例如，如果我在位置1,6,11,16（对角线上）添加元素，您将看到在位置2,3,4上，div和input在td中被删除。为什么

例如，如果我尝试将元素从位置1克隆到位置2，那么class将获得值“typeA-1”；当然，那里有一个计数器，但只针对id，不针对类，那么为什么类会获得计数器值呢

以下是JSFIDLE上的代码

谢谢

var counter = 1;
function allowDrop(ev)  {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function clone(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var original = document.getElementById(data);
    var set = document.getElementById("empty");
    set.firstElementChild.setAttribute("value", data);
    set.setAttribute("id", data+"-"+(counter++));
    set.setAttribute("class", data);
    set.setAttribute("draggable", "true");
    set.setAttribute("ondragstart", "drag(event)");
    set.src = original.src;
    ev.target.appendChild(set);
 }

function trash(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    var set=document.getElementById(data);
    set.setAttribute("id", "empty");
    set.setAttribute("class", "empty");
    set.firstElementChild.setAttribute("value", "empty");
    set.removeAttribute("draggable");
    set.removeAttribute("ondragstart");
}

---

看来我用的方法是完全错误的，所以我用了一个新的。我没有设置属性，而是用“cloneNode（true）”克隆了基本的“div”，然后得到了克隆的元素父元素并设置了输入值

function clone(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var original = document.getElementById(data);
    var clone = original.cloneNode(true);
    var copyimg = original.parentNode.appendChild(clone);
    copyimg.setAttribute("id", data+'-'+counter++);
    ev.target.appendChild(copyimg);
    var set = copyimg.parentNode;
    set.firstElementChild.setAttribute("value", data.split('-')[0]);
 }

---

您的问题源于具有相同id的多个元素。您有一堆id为空的元素，因此

var set=document.getElementById（“空”）

没有很好的定义。该类也会更新到id，因为ondrag将文本数据设置为id，然后在克隆元素时将该类设置为该数据节。是的，但是当我删除时，它似乎会获得该特定id并相应地进行更改。我不明白为什么要删除具有相同ID的其他元素。我可以放置不同的ID，但如何获取它们并更改值？我需要做的主要事情是使用div类相应地更改输入值，以便提交它并将其添加到数据库中