總共使用三個鼠標事件：
onmouseup：鼠標擡起事件
onmousedown：鼠標按下事件
onmousemove：鼠標移動事件
style樣式代碼
給整個document加相對定位，給要拖動的div加絕對定位
<style type="text/css">
.box{
width: 200px;
height: 200px;
background: #00FFFF;
position: absolute;
top: 0;
left: 0;
}
</style>
body內容
<body>
<div class="box">
</div>
</body>
js代碼
<script type="text/javascript">
var box=document.querySelector('.box');
var starX=null;
var starY=null;
var left=null;
var top1 =null;
box.onmousedown=function(ev){//給要移動的那個div加鼠標按下事件
ev = ev || window.event;//event做ie兼容
starX=ev.pageX;
starY=ev.pageY;
left=box.offsetLeft;//到父級的左邊距離
top1 =box.offsetTop;//到父級的頂部距離
document.onmousemove=function(ev){//給整個文檔加移動事件
ev = ev || window.event;
var dia=ev.pageX - starX;//鼠標現在的距離減去之前的距離 得到一個差值
var dib=ev.pageY - starY;
box.style.top = top1+dib+'px';//重新給box的頂部和left賦值
box.style.left=left+dia+'px';
}
document.onmouseup=function(){
document.onmousemove=null;//解除綁定移動事件
document.onmouseup=null;//解除綁定擡起事件
}
console.log(starX,starY)
}
</script>