快捷導(dǎo)航

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

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

最近研究了一下jQuery，覺(jué)得真的是一個(gè)很不錯(cuò)的js庫(kù)，其他的不說(shuō)，關(guān)鍵是有翔實(shí)的文檔，這點(diǎn)是非常關(guān)鍵的。

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

注意文中加載了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> 