快捷導(dǎo)航

jQuery 可以拖動的div實現(xiàn)代碼腳本之家修正版

更新時間：2009年06月26日 12:49:10 作者：

最近研究了一下jQuery，覺得真的是一個很不錯的js庫，其他的不說，關(guān)鍵是有翔實的文檔，這點是非常關(guān)鍵的。

當(dāng)然，代碼使用起來也非常的方便，很多東西就不用自己再去琢磨了。
研究的過程中順便用jQuery實現(xiàn)了一個div的拖動，代碼附于本文結(jié)尾。
實現(xiàn)的思路請參考我的可以拖動的DIV（二）一文。
在參考jQuery中文網(wǎng)站中的例子時，我發(fā)現(xiàn)他們在div窗口標(biāo)題欄觸發(fā)click事件時，將div的位置移上了一些，而mouseup的事件注冊在整個div窗口上，這個思路讓我很受啟發(fā)，解決了鼠標(biāo)移動很快而div不能跟上導(dǎo)致的錯誤，非常好的解決辦法。
另外，請注意事件起泡，在jQuery以及任何實現(xiàn)div拖動的js代碼中，事件起泡無疑都是要阻止的。
在jQuery 的bind或者unbind方法中，函數(shù)的返回值最好都用false，不信的話，可以試試true。
這個事件起泡的過程在一般代碼中我們用stopPropagation方法來阻止。
效果圖：

注意文中加載了jquery-1.2.6.js

復(fù)制代碼代碼如下:

<script language="javascript" type="text/javascript" src="jquery-1.2.6.js"></script> 
<style type="text/css"> 
<!– 
body { 
background-color: #333333; 
} 
.win{ 
position:absolute; 
top:0px; 
left:0px; 
width:300px; 
height:222px; 
} 
.title{ 
height:20px; 
width:300px; 
position:absolute; 
background-color:#666666; 
float:inherit; 
top:0px; 
left:0px; 
background-image:url(bgo.gif); 
} 
.winCon{ 
height:200px; 
width:298px; 
position:absolute; 
border:solid; 
border-width:1px; 
border-color:#666666; 
border-top:none; 
float:inherit; 
left:0px; 
top:20px; 
} 
–> 
</style> 
<a href="#" onclick="addDiv(this,'asd');">asgfsdg</a> 
<a href="#" id="zxca" onclick="addDiv(this,'zxc');">asgfsdg</a> 
<script language="javascript" type="text/javascript"> 
function addDiv(element,str){ 
$(document.body).append("<div class='win' id='win"+str+"‘><div class='title' id='"+str+"‘></div><div class='winCon'>asfsdgfsdgsd</div></div>"); 
$("#"+str).mousedown(function(event){ 
var offset = $(this).offset(); 
_x=event.clientX-offset.left; 
_y=event.clientY+20-offset.top; 
$("#win"+str).css({"top":offset.top-20+"px"}); 
$("#win"+str).mousemove(function(event){ 
_xx=event.clientX-_x; 
_yy=event.clientY-_y; 
this.style.left=_xx+"px"; 
this.style.top=_yy+"px"; 
this.style.zIndex="100″; 
return false; 
}); 
return false; 
}); 
$("#win"+str).mouseup(function(){ 
$(this).unbind("mousemove"); 
$(this).css({"z-index":"-1″}); 
return false; 
}); 
element.removeEventListener("click",true); 
} 
</script> 