javascript - strange behavior on manipulating DOM with drag and drop -
i'm using html5 drag , drop set values div dropped, there strange behavior can't understand nor find solution.
for example if add elements on position 1,6,11,16 (on diagonal), you'll see on position 2,3,4 div , input gets deleted inside td. why's that?
and example if try clone element position 1 position 2 class gets value "typea-1" example; of course there counter there, id , not class too, why class gets counter value?
here code on jsfiddle http://jsfiddle.net/shlw3/1/
thanks
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"); } 
seems approach used totally wrong used new one. instead of setting attributes cloned base 'div' 'clonenode(true)' , got cloned element parent , set input value.
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]);  } 
Comments
Post a Comment