.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(); }
三、拖拽的封装
在封装里有