javascript实现div的拖动并调整大小

最新推荐文章于 2024-04-08 15:53:07 发布

sx1989827

最新推荐文章于 2024-04-08 15:53:07 发布

阅读量6.6k

点赞数

分类专栏： ajax 文章标签： div javascript function html qq

本文链接：https://blog.csdn.net/sx1989827/article/details/3794104

版权

ajax 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

经常上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.οnclick=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.οnmοusedοwn=function(){ this.move=1; this.x=window.event.offsetX; //alert(this.x); this.y=window.event.offsetY; this.setCapture(); } move.οnmοusemοve=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.οnmοuseup=function(){ if(this.move==1){ this.move=0; //this.style.cursor="normal"; this.releaseCapture(); } } a.οnmοusemοve=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.οnmοuseup=function(){ if(this.move==1){ this.move=0; this.releaseCapture(); } } a.οnmοusedοwn=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"></mce:script> </body> </html>

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

sx1989827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现div的拖动并调整大小

经常上qq空间的朋友一定对qq空间的个性编辑模块印象深刻,可以随意的拖动页面上的元素并且调动大小实现动态布局,当然我每次上csdn博客也会在右下角看见一个新闻窗口,这种效果的确很酷,那么我们也来实现一个吧. 实现步骤:1.首先是动态创建一个类似这样的html结构:关闭 2.id为body的为你要放置内容的div容器,move是可移动的span,close是关闭这个窗口(准确
复制链接

扫一扫