<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="position: absolute;left:100px;top:100px;width:200px;height:200px;
background-color:white;border:solid black;" onmousedown="beginDrag(this,event)"></div>
<script>
function beginDrag(elementToDrag,event){
//获得发生事件元素的位置，注意：要拖动的元素必须在css中定义了left和top属性
var x=parseInt(elementToDrag.style.left);
var y=parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击之间的距离
var deltaX=event.clientX-x;
var deltaY=event.clientY-y;
if(document.addEventListener){//用于DOM2的事件添加方法
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}else if(document.attachEvent) {//用于IE事件添加
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
if(event.stopPropagation){
event.stopPropagation();//在DOM2下取消冒泡；
}
else{
evnet.cancelBubble=true;//在IE下取消冒泡；
}
if(evnet.preventDefault){
event.preventDefault();//在DOM2中阻止默认行为
}
else{
event.returnValue=false;//在IE中阻止默认行为
}
function moveHandler(e) {
if(!e) e=window.event;
//将元素移动到当前的鼠标位置
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
if(evnet.stopPropagation){
evnet.stopPropagation();
}
else{
event.cancelBubble=true;
}
}
//鼠标按钮释放时，注销事件处理程序
function upHandler(e) {
if(document.removeEventListener) {
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}else{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
}
</script>
</body>
</html>
