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