.onmousedown / .onmousemove / .onmouseup ——鼠标按下 / 移动 / 释放元素时触发（拖拽）

一、拖拽相关方法

1、onmousedown——选择元素

写法：元素.onmousedown = function() {}

oDiv.onmousedown = function(ev) {}

2、onmousemove —— 移动元素

写法：元素.onmousemove = function() {}

触发频率：不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

var i = 0;
document.onmousemove = function() {
    document.title = i++;  //鼠标移动，页面的标题发生变化，移动的越慢数字越大
}

3、onmouseup —— 释放元素

写法：元素.onmouseup = function() {}

document.onmouseup = function() {}

4、三者结构关系

oDiv.onmousedown = function() {
    document.onmousemove = function() {} //拖动的太快了超出元素的本身的位置会停在半路，所以元素改为文档
    document.onmouseup = function() {}  //如果有别的元素在拖动元素停止的位置之上，松开鼠标则还可以继续拖动，因为不是在拖动元素上松开的，所以元素应改为文档      
}

 

二、注意

1、拖拽的时候，如果有文字被选中，会产生问题

原因：当鼠标按下的时候，如果页面中有文字被选中，那么会触发浏览器默认拖拽文字的效果

解决办法：

（1）标准浏览器：阻止默认行为

return false;

（2）IE678：没法阻止，所以需要设置全局捕获——.setCapture()

if ( obj.setCapture ) {
       obj.setCapture();
}       

 

三、拖拽的封装

在封装里有