javascript实现div的拖动并调整大小类似qq空间个性编辑模块

更新时间：2012年12月12日 10:33:35 作者：

qq空间的个性编辑模块可以随意的拖动页面上的元素并且调动大小实现动态布局;这种效果的确很酷,那么我们也来实现一个吧

经常上qq空间的朋友一定对qq空间的个性编辑模块印象深刻,可以随意的拖动页面上的元素并且调动大小实现动态布局,当然我每次上csdn博客也会在右下角看见一个新闻窗口,这种效果的确很酷,那么我们也来实现一个吧.

实现步骤:
1.首先是动态创建一个类似这样的html结构:

复制代码代码如下:

 
<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">关闭</span> 
</div> 
<div id="body" style="width:100%;height:90%"></div> 
</div> 

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)<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; 
} 

代码也不复杂,主要是什么onmousedown,onmousemove,onmouseup的编写.我调整大小的原理当的你鼠标移动到层的右下角时,鼠标指针改变,这时按下鼠标并且移动时,会将当前层setcapture,移动鼠标层会随鼠标的位置而调整大小,松开鼠标releasecapture.

函数的参数step是你按下关闭时每次时间间隔移动的步数,t是时间间隔,html是你要插入到body层里的html代码.
一下给出一个调用例子:

复制代码代码如下:

 
<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> 

代码有bug的地方还请大家多多包涵.

您可能感兴趣的文章:

自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
最近写了个在线的编辑器，类似ewebeditor那样的，当然没有人家那么强大，但是基本功能都有，而且还是兼容ie和ff的,需要的朋友可以参考下
2012-12-12
随机显示个性签名的js代码(兼容ie,firefox)
随机显示个性签名的js代码,主要是利用随机数。需要的朋友可以参考下。
2011-04-04
iphone手机桌面滑动效果使用css3实现
iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器,此效果比较不错，有兴趣的朋友可以多测试几个浏览器
2012-12-12
一款双向无缝+按钮定位的焦点图实现代码
做这个焦点图弄了大个晚上，感觉挺晕的~发上来给大家踩一下吧双向无缝的原理很简单实现起来也不难，主要头痛的是在前后无缝与按钮定位之间的配合问题，不过还好现在总算OK了。
2010-11-11
js 模拟气泡屏保效果代码
用JavaScript实现的模拟气泡屏保效果代码，包括气泡的碰撞效果，喜欢的朋友可以参考下。
2010-07-07
Js获取电脑屏幕的颜色色彩品质(16位或32位)
Js获取屏幕的颜色色彩品质，16位或32位，只需运行本代码，即可得到你当前屏幕的颜色品质，现在一般都是32位了。
2010-09-09
Js检测判断URL网址输入是否正确
JavaScript检测判断用户输入的URL是否正确，简单的正则规则，很准确的判断URL的合法性，值得借鉴。
2010-10-10
table 隔列(行)换色效果让表格结构更清淅
table 隔列换色效果，很实用的一款网页特效代码，用隔行换色来修饰表格，可让表格结构更清淅，也更加美观，是一个十分流行的表格特效,在网页中有利于提高用户体验，是一个很不错的效果，需要的朋友可以参考下
2012-12-12
HTML很火的浪漫爱心表白代码
程序员的你是不是也想送个特别的礼物。今天给大家分享一个HTML+CSS+jQuery实现的情侣浪漫爱心表白JS特效，视觉效果还是相当不错！得此表白神器，程序猿也可以很浪漫！快去追你的女神吧，把这个告白爱心动画发给你心爱的她！
2023-01-01
网页计算器一个JS计算器
一个挺小的JavaScript网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的数学算数运算
2013-09-09