拖拽的基本原理

要点：

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

window.onload = function(){
    var oDiv = document.getElementById('div1');
    
    var disX = 0; //鼠标和物体之间的距离
    var disY = 0;
    
    oDiv.onmousedown = function(ev){
        var oEvent = ev || event;
        var self = this;
        disX = oEvent.clientX - self.offsetLeft;
        disY = oEvent.clientY - self.offsetTop;
        
        document.onmousemove = function(ev){
            var oEvent = ev || event;
            var l = oEvent.clientX - disX;
            var t = oEvent.clientY - disY;
            
            
            if (l < 0) {
                l=0;
            }
            else if(l > document.documentElement.clientWidth-self.offsetWidth){
                l = document.documentElement.clientWidth-self.offsetWidth;
            }
            if(t < 0){
                t = 0;
            }else if(t > document.documentElement.clientHeight-self.offsetHeight){
                t = document.documentElement.clientHeight-self.offsetHeight;
            }
            
            self.style.left = l + 'px';
            self.style.top = t + 'px';
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
        
        return false;
    }
};