JavaScript implements dragging and resizing of divs similar to the QQ space personalized editing module

JavaScript implements dragging and resizing of divs similar to the QQ space personalized editing module_other special effects

WBOY

Release： 2016-05-16 17:46:37

Original

1194 people have browsed it

Friends who often visit QQ space must be deeply impressed by the personalized editing module of QQ space. You can drag elements on the page and adjust the size to achieve dynamic layout. Of course, every time I go to the csdn blog, I will also see a news window in the lower right corner. This effect is really cool, so let’s implement one too.

Implementation steps:
1. First, dynamically create an html structure similar to this:

Copy code The code is as follows:

2. The div container with the id of body is the div container where you want to place the content, move is the movable span, and close is to close the window (layer to be precise).
3. Then bind the event to these objects. Take a look at the code specifically.

Copy the code The code is as follows:

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

The code is not complicated. It mainly consists of writing onmousedown, onmousemove, and onmouseup. The principle of my resizing is that when you move the mouse to the lower right corner of the layer, the mouse pointer changes. When you press the mouse and move it, it will Setcapture the current layer, move the mouse and the layer will resize according to the position of the mouse. Release the mouse to releasecapture. The parameter step of the

function is the number of steps to move at each time interval when you press close, and t is the time. Interval, html is the html code you want to insert into the body layer.
Here is a call example:

Copy code The code is as follows:

Untitled Document

< body>

Please forgive me if there are bugs in the code.