javascript封装drag()拖拽函数
- - 收集分享互联网资源!拖拽效果虽然项目中很少使用,但不可否认其是一个很经典的效果(google产品使用的挺多的),下面整理了拖拽效果的代码框架. 里面解决兼容性的代码需要重点理解下:. 1、通过setCapture()与releaseCapture()解决IE浏览器下拖拽图片的bug,即图片拖拽过程中不跟随鼠标移动直接到达鼠标目标点;.
拖拽效果虽然项目中很少使用,但不可否认其是一个很经典的效果(google产品使用的挺多的),下面整理了拖拽效果的代码框架。
里面解决兼容性的代码需要重点理解下:
1、通过setCapture()与releaseCapture()解决IE浏览器下拖拽图片的bug,即图片拖拽过程中不跟随鼠标移动直接到达鼠标目标点;
2、通过return false取消浏览器的默认行为,firefox浏览器下空对象元素无法拖动[高版本浏览器已修复];
function drag(obj){
obj.onmousedown = function(ev){
var ev = ev || event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
//修复ie浏览器下图片不跟随鼠标移动
if(obj.setCapture){
obj.setCapture();
}
document.onmousemove = function(ev){
var ev = ev || event;
obj.style.left = ev.clientX - disX;
obj.style.top = ev.clientY - disY;
}
document.onmouseup = function(){
obj.onmousedown = obj.onmousemove = null;
//通过释放releaseCapture()修复IE浏览器下任何区域对对象元素事件的影响[桌面事件也会对其产生影响]
if(obj.releaseCapture){
obj.releaseCapture();
}
}
//取消浏览器的默认行为
return false;
}
}
代码已经ok了,直接调用drag(obj)函数就可以了,obj为拖动元素…