兼容较好的拖动代码-WEB开发人员网络-XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<div id="aaa" style="position:absolute;left:100px;top:100px;background-color:#000000;opacity:1;filter:Alpha(Opacity=100);" onmousedown="beginDrag(this,event);"><img src="http://www.baidu.com/img/logo.gif"/></div>
<div style="position:absolute;left:300px;top:300px;background-color:#000000;opacity:1;filter:Alpha(Opacity=100);" onmousedown="beginDrag(this,event);"><img src="http://www.baidu.com/img/logo.gif"/></div>
<div style="position:absolute;top:1000px;width:10px;height:10px;"></div>

<script type="text/javascript">
	function beginDrag(me,evt){
		evt = evt?evt:window.event;
		var detlaX = evt.clientX - parseInt(me.style.left);
		var detlaY = evt.clientY - parseInt(me.style.top);
		if(document.all){
			me.attachEvent("onmousemove",move);
			me.attachEvent("onmouseup",up);
			me.setCapture();
		}else{
			document.addEventListener("mousemove",move,true);
			document.addEventListener("mouseup",up,true);
			evt.stopPropagation();
			evt.preventDefault();
		}
		function move(evt){
			me.style.left = evt.clientX - detlaX + "px";
			me.style.top = evt.clientY - detlaY + "px";
			if(document.all){
				me.style.filter = "Alpha(Opacity=50)";
			}else{
				me.style.opacity = 0.5;
				evt.stopPropagation();
			}
		}
		function up(evt){
			if(document.all){
				me.style.filter = "Alpha(Opacity=100)";
				me.detachEvent("onmousemove",move);
				me.detachEvent("onmouseup",up);
				me.releaseCapture();
			}else{
				me.style.opacity = 1;
				document.removeEventListener("mousemove",move,true);
				document.removeEventListener("mouseup",up,true);
				evt.stopPropagation();
			}
		}
	}
	
	var endTop = 0;
	var aaa = document.getElementById("aaa");
	function bbb(){
		var startTop = document.documentElement.scrollTop;
		var per = 0.1*(startTop - endTop);
		if(per>0) per = Math.ceil(per);
		else per = Math.floor(per);
		aaa.style.top = parseInt(aaa.style.top) + per + "px";
		endTop += per;
	}
	window.setInterval(bbb,1);
</script>
</body>
</html>

提示：您可以先修改部分代码再运行