拖拽的基本原理

要点：

计算物体与鼠标的距离
onmousedown 后在有onmousemove动作，是按着移动
给document这么文档加onmousemove，这样能保证移动过快，物体还保持相对鼠标的位置
onmouseup后，解除document上事件
解除onmousedown的默认行为，return false

 1 window.onload = function(){
 2     var oDiv = document.getElementById('div1');
 3     
 4     var disX = 0; //鼠标和物体之间的距离
 5     var disY = 0;
 6     
 7     oDiv.onmousedown = function(ev){
 8         var oEvent = ev || event;
 9         var self = this;
10         disX = oEvent.clientX - self.offsetLeft;
11         disY = oEvent.clientY - self.offsetTop;
12         
13         document.onmousemove = function(ev){
14             var oEvent = ev || event;
15             var l = oEvent.clientX - disX;
16             var t = oEvent.clientY - disY;
17             
18             
19             if (l < 0) {
20                 l=0;
21             }
22             else if(l > document.documentElement.clientWidth-self.offsetWidth){
23                 l = document.documentElement.clientWidth-self.offsetWidth;
24             }
25             if(t < 0){
26                 t = 0;
27             }else if(t > document.documentElement.clientHeight-self.offsetHeight){
28                 t = document.documentElement.clientHeight-self.offsetHeight;
29             }
30             
31             self.style.left = l + 'px';
32             self.style.top = t + 'px';
33         }
34         document.onmouseup = function(){
35             document.onmousemove = null;
36             document.onmouseup = null;
37         }
38         
39         return false;
40     }
41 };