js实现可拖拽的div

前言

      下午忙里偷闲想写一个可拖拽的例子，留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove， 但从没有动手实践过，今天想起了自己实践了并学习了张鑫旭的demo实现。 学习张鑫旭代码的同时又了解了几知识点。

      1、obj.currentStyle[attr] 和getComputedStyle(obj,false)[attr]。获取DOM非行间样式。 我百度了下currentStyle看到有的说Chrome和FF是不支持的,为了兼容，所以用到了这两个方法。

      2、onselectstart。 IE和Chrome适用，防止内容被选中默认是true。

 

拖拽原理

     1、可拖拽的div主要是确定mouseDown事件发生时的DOM承载对象，以及mouseMove时的坐标计算。

     2、其次是当拖拽完成时的DOM承载对象。多数会选择document，不知道我理解的对不对？

 

效果图

  

js

/**

   拖拽div

   关键事件:mouseDown, mouseMove,mouseUp

**/



var params={

	top:0,

	left:0,

	currentX:0,

	currentY:0,

	flag:false

};



/**

obj.currentStyle[attr]

getComputedStyle(obj,false)[attr] 获取DOM非行间样式

**/

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.even;

			bar.onselectstart=function(){ //IE和Chrome适用，防止内容被选中默认是true

				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(callback=='function'){

			callback(parseInt(params.left)+disX,parseInt(params.top)+disY);

		}

	}

}

　

下载地址：http://yunpan.cn/cwTJmDQWtAgLs  访问密码 7d22