javascript封装drag()拖拽函数

拖拽效果虽然项目中很少使用,但不可否认其是一个很经典的效果(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为拖动元素…

你可能感兴趣的:(javascript)