用鼠标事件实现拖拽

首先复习一下鼠标事件：

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