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 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JavaScript中的闭包
Feb 24 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
JS实现可视化文件上传
Sep 08 Javascript
使用Vue生成动态表单
Nov 26 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
Aug 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
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python处理Excel文件实例代码
2017/06/20 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python读写csv文件的方法
2019/08/13 Python
如何理解python中数字列表
2020/05/29 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
施工质量承诺书范文
2014/05/30 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
个人自我剖析材料
2014/09/30 职场文书
大学生在校表现评语
2014/12/31 职场文书
自我评价优缺点范文
2015/03/11 职场文书
离婚纠纷代理词
2015/05/23 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang