js实现简单拖拽效果

方法如下:

var params = { 			
      left: 0, 			
      top: 0, 			
      currentX: 0, 			
      currentY: 0, 			
      flag: false 		
};  		
var getCss = function(o,key){ 			
	return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 	 		
};  		
var startDrag = function(bar, target, callback){ 			
	if(getCss(target, "left") !== "auto"){ 				
		params.left = getCss(target, "left"); 			
	} 			
	if(getCss(target, "top") !== "auto"){ 				
		params.top = getCss(target, "top"); 			
	}  			
	bar.onmousedown = function(event){ 				
	params.flag = true; 				
	if(!event){ 					
		event = window.event; 					
		bar.onselectstart = function(){ 						
			return false; 					
		}   				
	} 				
	var e = event; 				
	params.currentX = e.clientX; 				
	params.currentY = e.clientY; 			
	}; 			
document.onmouseup = function(){ 				
	params.flag = false;	 				
	if(getCss(target, "left") !== "auto"){ 					
		params.left = getCss(target, "left"); 				
	} 				
	if(getCss(target, "top") !== "auto"){ 					
		params.top = getCss(target, "top"); 				
	} 
	}; 			
document.onmousemove = function(event){ 				
	var e = event ? event: window.event; 				
	if(params.flag){ 					
		var nowX = e.clientX, nowY = e.clientY; 					
		var disX = nowX - params.currentX, disY = nowY - params.currentY; 					
		target.style.left = parseInt(params.left) + disX + "px"; 					
		target.style.top = parseInt(params.top) + disY + "px"; 					
	if (event.preventDefault) { 						
		event.preventDefault(); 					
		} 					
		return false; 				
	} 				 				
	if (typeof callback == "function") { 					
		callback(parseInt(params.left) + disX, parseInt(params.top) + disY); 				
		} 
	}	 		
};

 使用方法为

     startDrag("触发拖拽的对象","被拖拽的对象")