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