0

html5 ドラッグ アンド ドロップを使用して、div がドロップされた場所にいくつかの値を設定していますが、理解できない奇妙な動作があり、解決策を見つけることもできません。

たとえば、位置 1,6,11,16 (対角線上) に要素を追加すると、位置 2,3,4 でdivと入力が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");
}
4

1 に答える 1

1

私が使用したアプローチは完全に間違っているように見えるので、新しいアプローチを使用しました。属性を設定する代わりに、実際にベースの「div」を「cloneNode(true)」で複製し、複製された要素の親を取得して入力値を設定しました。

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]);
 }
于 2013-05-15T15:07:37.603 に答える