.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();
}       

 

三、拖拽的封装

在封装里有

posted @ 2017-04-12 15:01  念念念不忘  阅读(840)  评论(0)    收藏  举报