用鼠標事件實現拖拽

首先複習一下鼠標事件：

click: 在用戶單擊主鼠標按鈕，或者按下回車鍵時觸發。
mousedown：用戶按下任意鼠標按鈕時觸發，不能通過鍵盤觸發；
mouseenter：在鼠標光標從元素外部首次移動到元素範圍之內時觸發。
mouseleave： 在鼠標光標移動到元素範圍之外時觸發
mousemove：當鼠標指針在元素內部移動時重複地觸發，不能通過鍵盤事件觸發這個事件；
mouseout：在鼠標指針位於元素上方，然後用戶將其移入另一個元素時觸發。又移入地另一個元素可能位於前一個元素地外部，也可能是這個元素的子元素；
mouseover: 在鼠標指針位於一個元素外部時，然後將其首次移入到另一個元素邊界之內時觸發。
mouseup：在用戶釋放鼠標按鈕時觸發

只有在同一個元素上相繼觸發mousedown和mouseup事件時，纔會觸發click事件；

用mousedown和mouseup，mousemove事件實現拖拽

html結構：定義一個移動div

<div id="div1"></div>

簡單寫下樣式：注意定位position

#div1{
            position: absolute;
            width: 200px;
            height: 200px;
            background: pink;
        }

js代碼：

window.onload = function(){
        var moveBox = document.getElementById('div1');
        var windowH = window.innerHeight,
            windowW = window.innerWidth;
        // 當鼠標在moveBox裏面按下時
        moveBox.onmousedown = function(event){
            event = event || window.event;
            var distanceX = event.clientX - this.offsetLeft,
                distanceY = event.clientY - this.offsetTop;
            // 當鼠標在document任意位置時，連續觸發    
            document.onmousemove = function(event_2){
                event_2 = event_2 || window.event;
                var left = event_2.clientX - distanceX,
                    top = event_2.clientY - distanceY;
                if (left < 0) left = 0;
                if (top < 0) top = 0;
                if (left > windowW - moveBox.offsetWidth) left = windowW - moveBox.offsetWidth;
                if (top > windowH - moveBox.offsetHeight) top = windowH - moveBox.offsetHeight;
                moveBox.style.left = left + 'px';
                moveBox.style.top = top + 'px'
            // 當鼠標離開時,移除鼠標移動事件；
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
      }
    }