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