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

Question

我正在使用html5拖放来设置删除div的一些值，但是有些奇怪的行为让我无法理解，也找不到解决方案。

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

例如，如果我尝试将元素从位置1克隆到位置2，那么类会获得值“ typeA-1 ”，例如;当然那里有一个计数器，但是只有id而不是类，所以为什么这个类得到计数器值？

以下是jsFiddle http://jsfiddle.net/SHLW3/1/

上的代码

由于

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");
}

Answer 1

似乎我使用的方法完全错误，所以我使用了一个新方法。我没有设置属性，而是实际使用'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]);
 }