js拖拽添加html dom,HTML5使用javascript拖放DOM操作

我正在尝试使用本机拖放事件重新排序DOM SVG元素.下面的代码似乎在Firefox中工作(有一些奇怪的图像效果),在Chrome中工作次数有限(2或3次拖放重新排序工作,然后它似乎挂起),并且在IE中根本不是很好.我最好的猜测是有一些关于我没有正确思考的事件,某种类型的重置.或者也许使用没有dataTransfer的拖动事件这种方式是不正确的.我的目标是在没有库的情况下理解这种类型的函数,但是要在最基本的层面上更清楚地理解DOM函数,

javascript,HTML和CSS.在列表中的任何地方我都很容易出错.

Drag and Drop Experiments

var dragSourceElement = null;

var dragTargetElement = null;

function doDragStart(e){

this.style.opacity = "0.4";

this.style.border = "solid";

dragSourceElement = this;

}

function doDragEnter(e){

if(dragSourceElement != this){

this.style.border = "dashed";

}

}

function doDragLeave(e){

if(dragSourceElement != this){

this.style.border = "";

}

}

function doDragOver(e){

if(dragSourceElement != this){

dragTargetElement = this;

e.preventDefault();//to allow a drop?

}

}

function doDragEnd(e){

this.style.border = "";

this.style.opacity = "1.0";

}

function doDragDrop(e){

if(dragSourceElement != dragTargetElement){

dnd_svg(dragSourceElement,dragTargetElement);

}

dragSourceElement.style.border = "";

dragTargetElement.style.border = "";

dragSourceElement.style.opacity = "";

dragSourceElement = null;

dragTargetElement = null;

}

//called after a drag and drop

//to insert svg element c1 before c2 in the DOM

//subtree of the parent of c2, assuming c1 is

//dropped onto c2

function dnd_svg(c1,c2){

var parent_c2 = c2.parentElement;

parent_c2.insertBefore(c1,c2);

}

function addL(n){

n.addEventListener('dragstart',doDragStart,false);

n.addEventListener('dragenter',doDragEnter,false);

n.addEventListener('dragleave',doDragLeave,false);

n.addEventListener('dragover',doDragOver,false);

n.addEventListener('drop',doDragDrop,false);

}

addL(document.getElementById("s1"));

addL(document.getElementById("s2"));

addL(document.getElementById("s3"));