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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 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检查网站是否宕机的方法示例
2017/07/24 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
react基本安装与测试示例
2020/04/27 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
python的Template使用指南
2014/09/11 Python
Python六大开源框架对比
2015/10/19 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
促销活动策划方案
2014/01/12 职场文书
我为自己代言广告词
2014/03/18 职场文书
教师演讲稿大全
2014/05/16 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
第二次离婚起诉书
2015/05/18 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
学习nginx基础知识
2021/09/04 Servers