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


Posted in Javascript onDecember 12, 2012

经常上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的地方还请大家多多包涵.
Javascript 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 #Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 #Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 #Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 #Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 #Javascript
用js判断页面是否加载完成实现代码
Dec 11 #Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 #Javascript
You might like
php时间不正确的解决方法
2008/04/09 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP中header用法小结
2016/05/23 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python中操作符重载用法分析
2016/04/29 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python requests模块实例用法
2019/02/11 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
美食节策划方案
2014/05/26 职场文书
诚信考试标语
2014/06/24 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
python图像处理 PIL Image操作实例
2022/04/09 Python