JAvascript divのドラッグを実現し、qq空間の個性的な編集モジュールのようなサイズを調整する

よくqq空間に行く友达はきっとqq空間の個性の編集モジュールに対して印象的で、勝手にページの上の要素をドラッグしてそして大きさを変えて動的なレイアウトを実現することができて、もちろん私は毎回csdnブログに行くたびに右下で1つのニュースウィンドウを見て、この効果は確かにとてもクールで、それでは私达も1つを実現しましょう.
実装手順:
1.まず、このようなhtml構造を動的に作成します.

2.id为body的为你要放置内容的div容器,move是可移动的span,close是关闭这个窗口(准确说是层).
3.然后将事件绑定到这些对象上.具体看一下代码.

 
  
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="  "; 
  
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)//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; 
  
} 
  
 
 

コードも複雑ではありません.主にonmousedown、onmousemove、onmouseupの作成です.マウスがレイヤの右下隅に移動すると、マウスポインタが変化し、マウスを押して移動すると、現在のレイヤsetcaptureが移動し、マウスの位置に合わせてサイズが調整され、マウスreleaseaptureが放します.
関数のパラメータstepは、閉じるたびに時間間隔で移動するステップ数であり、tは時間間隔であり、htmlはbody層に挿入するhtmlコードである.
呼び出しの例を示します.

コードにバグがあるところはご容赦ください.