고급 드래그 라이브러리

1361 단어
이 라이브러리의 주요 사항
1. 드래그 기본 작업 완료
2. 브라우저 드래그의 영향 지우기
3. 범위 제한
(function(w){
	w.$={};
	w.$.drag=function(testNode,callBack){
		// 
		var startPoint={x:0,y:0};
		// 
		var elementPoint={x:0,y:0};
		
		testNode.onmousedown=function(ev){
			ev = ev||event;
			// debugger
			if(testNode.setCapture){
				testNode.setCapture();
			}
			
			startPoint.x = testNode.offsetLeft;
			startPoint.y = testNode.offsetTop;
			
			
			elementPoint.x = ev.clientX;
			elementPoint.y = ev.clientY;
			
			document.onmousemove=function(ev){
				ev = ev||event;
				var nowPoint={x:0,y:0};
				nowPoint.x = ev.clientX;
				nowPoint.y = ev.clientY;
				// top    x 
				var L = startPoint.x + (nowPoint.x - elementPoint.x );
				
				if(L<0){
					L=0;	
				}else if(L>( testNode.parentNode.clientWidth -testNode.offsetWidth )){
					L = testNode.parentNode.clientWidth - testNode.offsetWidth;
				}
				
				testNode.style.left=L+"px";
				
				
				if(callBack&&callBack["move"]&& typeof callBack["move"] === "function"){
					callBack["move"].call(testNode);
				}
			}
			
			document.onmouseup=function(){
				document.onmousemove = document.onmouseup =null;
				if(document.releaseCapture){
					document.releaseCapture();
				}
			}
			
			return false;
		}
	}
})(window)

좋은 웹페이지 즐겨찾기