用鼠标事件实现拖拽

首先复习一下鼠标事件：

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;
            }
        }
      }
    }