fixed固定定位实现可拖拽

废话不多说，直接上代码

HTML

<div id="content-div" class="content">
	内容信息
</div>

CSS

.content {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 200px;
	height: 400px;
	cursor: pointer;
	background-color: #387B90;
	color: white;
	cursor: move;
}

JS

/**
* 鼠标按下,准备拖拽
*/
function startDrag(event){  
	var obj = event.srcElement ? event.srcElement : event.target;
	obj = $(obj);
	if(event.button==0){//判断是否点击鼠标左键  
		gapX=event.clientX-obj.offset().left + $(window).scrollLeft();
		gapY=event.clientY - obj.offset().top + $(window).scrollTop();  
		//movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的  
		$(document).bind("mousemove",move);  
		$(document).bind("mouseup",stop);  
		 
	}  
	return false;//阻止默认事件或冒泡  
}

/* 
*鼠标拖拽移动事件
*/
function move(event){  
	var obj = event.srcElement ? event.srcElement : event.target;
	obj = $(obj);
	obj.css({  
		"left":(event.clientX-gapX)+"px",  
		"top":(event.clientY-gapY)+"px"  
	});  
	return false;//阻止默认事件或冒泡  
}  

/**
* 鼠标释放停止移动
*/
function stop(){  
	//解绑定，这一步很必要，前面有解释  
	$(document).unbind("mousemove",move);  
	$(document).unbind("mouseup",stop);  
}  

/**
* 为元素绑上鼠标按下的事件
*/
var drag2=function(obj){
	obj.bind("mousedown",startDrag);  	
}

$(function(){
	drag2($('#content-div'));
})