快捷導航

javascript實現(xiàn)div的拖動并調(diào)整大小類似qq空間個性編輯模塊

更新時間：2012年12月12日 10:33:35 作者：

qq空間的個性編輯模塊可以隨意的拖動頁面上的元素并且調(diào)動大小實現(xiàn)動態(tài)布局;這種效果的確很酷,那么我們也來實現(xiàn)一個吧

經(jīng)常上qq空間的朋友一定對qq空間的個性編輯模塊印象深刻,可以隨意的拖動頁面上的元素并且調(diào)動大小實現(xiàn)動態(tài)布局,當然我每次上csdn博客也會在右下角看見一個新聞窗口,這種效果的確很酷,那么我們也來實現(xiàn)一個吧.

實現(xiàn)步驟:
1.首先是動態(tài)創(chuàng)建一個類似這樣的html結(jié)構(gòu):

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

 
<div style="height:200px;width:200px;overflow:hidden" id="a"> 
<div id="head" style="background-color:blue;height:5%"> 
<span id="move" style="width:90%;height:100%"></span> 
<span id="close" style="overflow:hidden;white-space:nowrap;background-color:red">關(guān)閉</span> 
</div> 
<div id="body" style="width:100%;height:90%"></div> 
</div> 

2.id為body的為你要放置內(nèi)容的div容器,move是可移動的span,close是關(guān)閉這個窗口(準確說是層).
3.然后將事件綁定到這些對象上.具體看一下代碼.

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

 
sx.activex.windowex={ 
init:function(step,t,html){ 
var a=document.createElement("div"); 
var head=document.createElement("div"); 
var move=document.createElement("span"); 
var close=document.createElement("span"); 
close.innerText="關(guān)閉"; 
var body=document.createElement("div"); 
head.appendChild(move); 
head.appendChild(close); 
a.appendChild(head); 
a.appendChild(body); 
a.style.height="200px"; 
a.style.width="200px"; 
a.style.overflow="hidden"; 
a.style.border="1px red solid"; 
head.style.backgroundColor="blue"; 
head.style.height="5%"; 
move.style.width="90%"; 
move.style.height="100%"; 
close.style.height="100%"; 
close.style.overflow="hidden"; 
close.style.whiteSpace="nowrap"; 
close.style.backgroundColor="yellow"; 
body.style.height="93%"; 
body.style.width="100%"; 
body.style.overflow="auto"; 
a.style.position="absolute"; 
close.style.position="absolute"; 
close.style.cursor="hand"; 
close.style.top=0+"px"; 
close.style.right=0+"px"; 
close.onclick=function(){ 
window.event.cancelBubble=true; 
var q=a.offsetHeight; 
var h=window.setInterval(function(){ 
if(Math.abs(q)>=0){ 
a.style.height=q+"px"; 
q=q-step; 
if(Math.abs(q)<step){ 
//e.style.height=q+"px"; 
window.clearInterval(h); 
//window.setTimeout(function(){ 
//alert(this==window); 
close.style.cursor="normal"; 
a.parentNode.removeChild(a); 
//a.style.lineHeight="0px"; 
//},10); 
} 
}else{ 
window.clearInterval(h); 
//a.style.display="none"; 
} 
},t); 
} 
move.onmousedown=function(){ 
this.move=1; 
this.x=window.event.offsetX; 
//alert(this.x); 
this.y=window.event.offsetY; 
this.setCapture(); 
} 
move.onmousemove=function(){ 
this.style.cursor="move"; 
if(window.event.clientX<=0 || window.event.clientY<=0 || window.event.clientX>=document.body.clientWidth || window.event.clientY>=document.body.clientHeight){return false;} 
if(this.move==1){ 

this.parentNode.parentNode.style.left=window.event.clientX-this.x+"px"; 
this.parentNode.parentNode.style.top=window.event.clientY-this.y+"px"; 
this.setCapture(); 
} 
} 
move.onmouseup=function(){ 
if(this.move==1){ 
this.move=0; 
//this.style.cursor="normal"; 
this.releaseCapture(); 
} 
} 
a.onmousemove=function(){ 
if(this.move==1){ 
if(window.event.clientX-this.offsetLeft<2 || window.event.clientY-this.offsetTop<2) return false; 
this.style.width=window.event.clientX-this.offsetLeft+"px"; 
this.style.height=window.event.clientY-this.offsetTop+"px"; 
close.style.right="0px"; 
this.setCapture(); 
} 
else{ 
if(window.event.offsetX-this.offsetWidth>-6 && window.event.offsetY-this.offsetHeight>-6) 
this.style.cursor="nw-resize"; 
else 
this.style.cursor="default"; 
} 
} 
a.onmouseup=function(){ 
if(this.move==1){ 
this.move=0; 
this.releaseCapture(); 
} 
} 
a.onmousedown=function(){ 
if(this.style.cursor=="nw-resize"){ 
this.move=1; 
this.setCapture(); 
} 
} 
body.innerHTML=html; 
return a; 
} 

代碼也不復(fù)雜,主要是什么onmousedown,onmousemove,onmouseup的編寫.我調(diào)整大小的原理當?shù)哪闶髽艘苿拥綄拥挠蚁陆菚r,鼠標指針改變,這時按下鼠標并且移動時,會將當前層setcapture,移動鼠標層會隨鼠標的位置而調(diào)整大小,松開鼠標releasecapture.

函數(shù)的參數(shù)step是你按下關(guān)閉時每次時間間隔移動的步數(shù),t是時間間隔,html是你要插入到body層里的html代碼.
一下給出一個調(diào)用例子:

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

 
<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 

<mce:script src="kongjian.js" mce_src="kongjian.js"></mce:script> 

<mce:script type="text/javascript"><!-- 
var a=sx.activex.windowex.init(10,10,"<img src="1.jpg" mce_src="1.jpg" height=500 width=500>"); 
//a.contentEditable=true; 
a.style.bottom="0px"; 
a.style.right="0px"; 
document.body.appendChild(a); 

// --></mce:script> 
</body> 
</html> 