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为拖动元素…