拖拽原理
設被拖動盒子爲“Box”；
設iEvent=ev || event;
給Box設position：absolute樣式；
鼠標座標（iEvent.clientX和 iEvent.clientY）；
Box相對父級距離（Box.offsetLeft 和 Box.offsetTop）
計算出鼠標相對於盒子的距離（BoxX=iEvent.clientX-Box.offsetLeft 和 BoxY=iEvent.clientY-Box.offsetTop）
給Box添加鼠標按下事件：Box.οnmοusedοwn=function(){};
Box的即時座標：
Box.style.left=iEvent.clientX-BoxX+’px’;
Box.style.top=iEvent.clientY-BoxY+’px’;
案列代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 120px;
background-color: crimson;
position: absolute;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var Box=document.getElementById('box');
var divX=0;
var divY=0;
Box.οnmοusedοwn=function(ev){
var iEvent=ev || event;
divX=iEvent.clientX-Box.offsetLeft;
divY=iEvent.clientY-Box.offsetTop;
document.οnmοusemοve=function(ev){
var iEvent=ev || event;
Box.style.left=iEvent.clientX-divX+'px';
Box.style.top=iEvent.clientY-divY+'px';
};
};
Box.οnmοuseup=function(){
document.οnmοusemοve=null;
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>每日清新
作者：王華橋