js实现拖拽效果

当拖拽元素时，由js中的鼠标按下、鼠标移动和鼠标释放三个事件相继触发

function drag(ele,subEle){
//ele为要移动的元素，subEle为ele元素的子元素，当鼠标在subEle元素上按下时，触发鼠标按下事件	
subEle.onmousedown=function(event){
	
	var rLeft=event.clientX-ele.offsetLeft;
	var rTop=event.clientY-ele.offsetTop;
//当鼠标移动时 触发鼠标移动事件

	document.onmousemove=function(event){
		event=event||window.event;
		winW=document.documentElement.clientWidth||document.body.clientWidth;
		winH=document.documentElement.clientHeight||document.body.clientHeight;
		maxW=winW-login.offsetWidth;
		maxH=winH-login.offsetHeight;

//设定移动的位置
		var moveX=event.clientX-rLeft;
		var moveY=event.clientY-rTop；

//限定元素移动的范围，防止滚动条的出现
		if(moveX<0){
			moveX=0;
		}else if(moveX>maxW){
			moveX=maxW;
		}
		if(moveY<0){
			moveY=0;
		}else if(moveY>maxH){
			moveY=maxH;
		}
		ele.style.left=moveX+'px';
		ele.style.top=moveY+'px';

	}
}

//当鼠标放开时，撤销鼠标移动事件
top.onmouseup=function(){
	document.onmousemove=null;
}
}