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'));
})