JS DIV图进行移动

js中如何拖动DIV中的图片？

实现思路：

①鼠标按下+鼠标移动 → 拖拽
②鼠标松开 → 无拖拽
③鼠标偏移 → 拖拽距离

用JavaScript事件方法表示就是：
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()

drag.js代码：

varparams={
	left:0,
	top:0,
	currentX:0,
	currentY:0,
	flag:false
};
//获取相关CSS属性
vargetCss=function(o,key){
	returno.currentStyle?o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key];	
};
//拖拽的实现
varstartDrag=function(bar,target,callback){
	if(getCss(target,"left")!=="auto"){
		params.left=getCss(target,"left");
	}
	if(getCss(target,"top")!=="auto"){
		params.top=getCss(target,"top");
	}
	//o是移动对象
	bar.onmousedown=function(event){
		params.flag=true;
		if(!event){
			event=window.event;
			//防止IE文字选中
			bar.onselectstart=function(){
				returnfalse;
			}
		}
		vare=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){
		vare=event?event:window.event;
		if(params.flag){
			varnowX=e.clientX,nowY=e.clientY;
			vardisX=nowX-params.currentX,disY=nowY-params.currentY;
			target.style.left=parseInt(params.left)+disX+"px";
			target.style.top=parseInt(params.top)+disY+"px";
		}
		
		if(typeofcallback=="function"){
			callback(parseInt(params.left)+disX,parseInt(params.top)+disY);
		}
	}	
};

HTML/CSS

#box{position:absolute;left:100px;top:100px;padding:5px;background:#f0f3f9;font-size:12px;-moz-box-shadow:2px2px4px#666666;-webkit-box-shadow:2px2px4px#666666;}
#main{border:1pxsolid#a0b3d6;background:white;}
#bar{line-height:24px;background:#beceeb;border-bottom:1pxsolid#a0b3d6;padding-left:5px;cursor:move;}
#content{width:420px;height:250px;padding:10px5px;}



拖拽