元素拖拽原理————————————————————————————–
onmousedown : 选择元素
onmousemove : 移动元素
onmouseup : 释放元素
拖拽事件结构
oDiv.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;//鼠标到div左边的距离
var disY = ev.clientY - this.offsetTop;//鼠标到div上边的距离
document.onmousemove = function(ev) {
//对象是document不会因为拖动太快鼠标脱离元素而停止拖拽
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
//对象是document,不会因为拖动到层级比oDiv元素高的元素时,oDiv对应的鼠标抬起事件绑定的函数失效
document.onmousemove = document.onmouseup = null;
}
}
1.拖拽的时候,如果有文字被选中,会产生问题
原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文字的效果
解决:
标准:阻止默认行为 在onmousedown事件绑定函数的末尾加上 return false;
非标准ie:全局捕获 oDiv.setCapture()把全局发生的onmousemove事件强制捕获到oDiv身上,干掉浏览器默认行为,
然后在onmouseup事件的时候再全局释放,oDiv.releaseCapture()
2.拖拽图片会有问题,原因,解决的办法同上
setCpature解析:
设置全局捕获 ,
当我们给一个元素设置全局捕获以后,那么这个元素就会
监听后续发生的所有事件,当有事件发生的时候,就会被
当前设置了全局捕获的元素所触发
在各浏览器的存在情况
ie : 有,并且有效果
ff : 有,但是没效果
chrome : 没有
所以标准下还是用return false;来阻止浏览器默认行为
综上所述,我们可以结合拖拽的基本结构和各条改进事项,对拖拽进行封装:
function drag(obj){
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}