纯javascript拖拽

css部分 

#gaga{
position:fixed;top:0;left:0;background:#f00;width:100px;height:100px;_position:absolute;cursor:move;

}

html部分

<div id="gaga"></div>

javascript部分

/*      2013-4-2 尜尜制作 鼠标拖拽效果
*      1、要实现鼠标拖拽功能，就是三个事件 鼠标按下事件（onmousedown）、鼠标移动事件（onmousemove）、鼠标弹起事件（onmouseup）；
*		2、当鼠标按下的时候 获取鼠标点击的距离浏览器左边（clientX）和顶部（clientY）的位置；
*		3、当鼠标按下的时候 获取被拖拽元素距离浏览器左边距离的位置（offsetLeft）和被拖拽元素距离浏览器顶部的位置（offsetTop）；
*		4、当鼠标在移动的时候把获取到的位置分别赋值给被拖拽元素的left和top；
*		5、当改变浏览器窗口大小的时候要对被拖拽元素的做判断；
*		6、当鼠标弹起的时候就清除鼠标按弹起事件（onmouseup）和鼠标移动事件（onmousemove）。
*/
function getEvent( e ){ // 封装event
	 return e || window.event;
};
function preDef( event ){           // 判断低版本的火狐 封装
	var e = getEvent( event );
	if( typeof e.preventDefault != "undefined" ){   // W3C
		e.preventDefault();
	}else{     // IE
		e.returnValue = false;
	};
};
function gaga(){           // 封装
	var oDiv = document.getElementById("gaga");      // 获取被拖拽元素的ID
	var wid = document.documentElement.clientWidth;   // 浏览器工作区域的宽度;
	var hei = document.documentElement.clientHeight;   // 浏览器工作区域的高度;
	oDiv.onmousedown = function( e ){            // 当按下鼠标的时候
		var e = getEvent( e );
		preDef( e );       // 判断低版本的火狐 在被拖拽元素是空的时候出现的问题
		var _this = this;            // 这个this是代表oDiv
		var offX = e.clientX - _this.offsetLeft;      // e.clientX是点击的位置距离浏览器左边的距离   _this.offsetLeft是点击的元素距离浏览器左边的距离
		var offY = e.clientY - _this.offsetTop;       // e.clientX是点击的位置距离浏览器顶部的距离     _this.offsetLeft是点击的元素距离浏览器顶部的距离
		document.onmousemove = function( e ){             // 当鼠标移动的时候   document代表全局
			var e = getEvent( e );
			var left = e.clientX - offX;              // 移动中oDiv的距离浏览器左边的位置
			var top = e.clientY - offY; 				// 移动中oDiv的距离浏览器顶部的位置
			if( top < 0  ){          // 如果拖拽元素拖拽的范围超出了浏览器的顶部的范围的时候
				top = 0;
			}else if( top > hei - _this.offsetHeight ){		// 如果拖拽元素拖拽的范围超出了浏览器的低部的范围的时候   
				top = hei - _this.offsetHeight;    // 得到被拖拽元素实际的top位置就是 浏览器工作区域的范围宽度减去被拖拽元素本身的高度
			}
			if( left < 0  ){          // 如果拖拽元素拖拽的范围超出了浏览器的左边的范围的时候      
				left = 0;  
			}else if( left > wid - _this.offsetWidth ){		// 如果拖拽元素拖拽的范围超出了浏览器的右边的范围的时候   
				left = wid - _this.offsetWidth;   // 得到被拖拽元素实际的left位置就是 浏览器工作区域的范围宽度减去被拖拽元素本身的宽度
			}
			_this.style.left = left + "px";                           
			_this.style.top = top + "px";							
		};
		document.onmouseup = function(){           // 当鼠标弹起的时候清除鼠标移动和鼠标弹起事件
			this.onmousemove = null;
			this.onmouseup = null;
		};
	};
};
gaga();
window.onresize = function(){        // 当改变浏览器窗口大小的时候
	var oDiv = document.getElementById("gaga");      // 获取被拖拽元素的ID
	var wid = document.documentElement.clientWidth;   // 浏览器工作区域的宽度;
	var hei = document.documentElement.clientHeight;   // 浏览器工作区域的高度;
	if( oDiv.offsetLeft > wid - oDiv.offsetWidth ){            // 当被拖拽的元素距离浏览器左边的位置大于 浏览器工作区域的宽度减去被拖拽元素本身的宽度的时候
		oDiv.style.left = wid - oDiv.offsetWidth + "px";       
	}else{               // 重新定位浏览器的工作区域
		gaga();
	};
	if( oDiv.offsetTop > hei - oDiv.offsetHeight ){            // 当被拖拽的元素距离浏览器顶部的位置大于 浏览器工作区域的高度减去被拖拽元素本身高度的时候
		oDiv.style.top = hei - oDiv.offsetHeight + "px";       
	}else{			 // 重新定位浏览器的工作区域
		gaga();
	};
};