<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{ /*必须使用此CSS，否则body上的事件无效*/
width:100%;
height:100%;
}
#dd{
width:120px;
height:120px;
background:#00ff00;
position:absolute;
}
</style>
<script>
var dd; //要拖动的div引用
var mflag=false; //移动标志位
function ondown(){
dd=document.getElementById('dd');
mflag=true;
}
function onmove(e){
if(mflag){
dd.style.left=e.clientX-60+"px"; //-60是为了把鼠标放在div的中心
dd.style.top=e.clientY-60+"px";
}
}
function onup(){
mflag=false;
}
</script>
</head>
<body onmousemove="onmove(event)"> <!-- 放在body上是为了鼠标快速移动时不会脱离div -->
<div id='dd' onmousedown='ondown()' onmouseup='onup()' style='left:80px; top:120px;'>
</div>
</body>
</html>