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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
理解JavaScript原型链
Oct 25 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
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+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP生成树的方法
2015/07/28 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP多进程简单实例小结
2019/11/09 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
详谈js模块化规范
2017/07/07 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
Tensorflow简单验证码识别应用
2017/05/25 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
python全局变量引用与修改过程解析
2020/01/07 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
python实现发送邮件
2021/03/02 Python
公司年会演讲稿范文
2014/01/11 职场文书
工程造价专业求职信
2014/07/17 职场文书
销售人才自我评价范文
2014/09/27 职场文书
维稳工作情况汇报
2014/10/27 职场文书
课题研究阶段性总结
2015/08/13 职场文书
php引用传递
2021/04/01 PHP