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

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:

Close

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:

< body>

Please forgive me if there are bugs in the code.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn