我正在尝试使用 native 拖放事件对 DOM SVG 元素重新排序。下面的代码似乎在 Firefox 中工作(带有一些奇怪的图像效果)，在 Chrome 中工作次数有限(2 或 3 次拖放重新排序工作，然后它似乎挂起)，并且在 IE 中根本不是很好。我最好的猜测是，我没有正确考虑所讨论的事件，某种类型的重置。或者以这种方式使用没有数据传输的拖动事件可能是不正确的。我的目标是在没有库的情况下理解这种类型的函数，而是在最基本的层面上对 DOM 函数、JavaScript、HTML 和 CSS 有一个更清晰的理解。我很容易在该列表中的任何地方出错。
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Experiments</title>
<style>svg { border-width:3px} </style>
</head>
<body>
<div id="main">
<svg id="s1" draggable="yes" width="100" height="100">
<circle cx="50" cy="50" r="30" fill="blue"></circle>
</svg>
<svg id="s2" draggable="yes" width="100" height="100">
<circle cx="50" cy="50" r="30" fill="red"></circle>
</svg>
<svg id="s3" draggable="yes" width="100" height="100">
<circle cx="50" cy="50" r="30" fill="yellow"></circle>
</svg>
</div>
<script type="text/javascript">
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"));
</script>
</body>
</html>
最佳答案
这tutorial非常适合理解原生拖放，有很多例子。
但是，可能存在与 SVG 相关的特定问题。参见例如这个 Mozilla bug : “dragstart 事件不会在 svg 元素上触发”。
关于javascript - HTML5 使用 javascript 拖放 DOM 操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14426958/