您的位置: 首页  >  IT文章  >  圆满拖拽+拖动改变Div的宽高+关闭按钮

圆满拖拽+拖动改变Div的宽高+关闭按钮

分类: IT文章 • 2023-11-21 19:54:00
完美拖拽+拖动改变Div的宽高+关闭按钮

演示地址:http://www.corange.cn/demo/3767/index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
width:100%;
height:100%;
background:#f00;
filter:alpha(opacity:0);
opacity:0;
z-index:9999;
position:absolute;
top:0;
left:0;
display:none;
}
#div2{
width:200px;
height:200px;
display:block;
overflow:hidden;
position:relative;
background:#EEEEEE;
border:1px solid #f00;
}
#div1{
width:15px;
height:15px;
background:#99CC00;
position:absolute;
right:0px;
bottom:0px;
cursor:nw-resize;
overflow:hidden;
font-size:12px;
text-align:center;
line-height:15px;
color:#FFFFFF;
float:right;
z-index:3;
}
#right{
width:15px;
height:100%;
background:#f00;
float:right;
position:absolute;
right:0;
top:0;
cursor:e-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#bottom{
width:100%;
height:15px;
background:#f00;
position:absolute;
left:0;
bottom:0;
cursor:n-resize;
overflow:hidden;
filter:alpha(opacity:0);
opacity:0;
z-index:1;
}
#div2 p{
padding:10px;
line-height:24px;
font-size:13px;
text-indent:24px;
color:#996600;
}
#div2 h2{
width:100%;
height:25px;
line-height:25px;
font-size:14px;
background:#CC9900;
color:#FFFFFF;
text-indent:15px;
cursor:move;
overflow:hidden;
position:relative;
z-index:9999;
}
#close{
float:right;
font-weight:normal;
font-size:12px;
padding-right:10px;
cursor:pointer;
display:block;
text-indent:0;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var zhezhao=document.getElementById("zhezhao");
var h2=oDiv2.getElementsByTagName("h2")[0];
var right=document.getElementById("right");
var bottom=document.getElementById("bottom");
var sClose=document.getElementById("close");
var mouseStart={};
var divStart={};
var rightStart={};
var bottomStart={};
//往右拽
right.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
rightStart.x=right.offsetLeft;
if(right.setCapture)
{
right.onmousemove=doDrag1;
right.onmouseup=stopDrag1;
right.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag1,true);
document.addEventListener("mouseup",stopDrag1,true);
}
};
function doDrag1(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+rightStart.x;
var w=l+oDiv.offsetWidth;

if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
oDiv2.style.width=w+"px";
};
function stopDrag1()
{
if(right.releaseCapture)
{
right.onmousemove=null;
right.onmouseup=null;
right.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag1,true);
document.removeEventListener("mouseup",stopDrag1,true);
}
};
//往下拽
bottom.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
bottomStart.y=bottom.offsetTop;
if(bottom.setCapture)
{
bottom.onmousemove=doDrag2;
bottom.onmouseup=stopDrag2;
bottom.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag2,true);
document.addEventListener("mouseup",stopDrag2,true);
}
};
function doDrag2(ev)
{
var oEvent=ev||event;
var t=oEvent.clientY-mouseStart.y+bottomStart.y;
var h=t+oDiv.offsetHeight;

if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}

oDiv2.style.height=h+"px";
};
function stopDrag2()
{
if(bottom.releaseCapture)
{
bottom.onmousemove=null;
bottom.onmouseup=null;
bottom.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag2,true);
document.removeEventListener("mouseup",stopDrag2,true);
}
};
//往左右同时拽
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv.offsetLeft;
divStart.y=oDiv.offsetTop;
if(oDiv.setCapture)
{
oDiv.onmousemove=doDrag;
oDiv.onmouseup=stopDrag;
oDiv.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='block';
};
function doDrag(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;


var w=l+oDiv.offsetWidth;
var h=t+oDiv.offsetHeight;

if(w<oDiv.offsetWidth)
{
w=oDiv.offsetWidth;
}
else if(w>document.documentElement.clientWidth-oDiv2.offsetLeft)
{
w=document.documentElement.clientWidth-oDiv2.offsetLeft-2;
}
if(h<oDiv.offsetHeight)
{
h=oDiv.offsetHeight;
}
else if(h>document.documentElement.clientHeight-oDiv2.offsetTop)
{
h=document.documentElement.clientHeight-oDiv2.offsetTop-2;
}

oDiv2.style.width=w+"px";
oDiv2.style.height=h+"px";
};
function stopDrag()
{
if(oDiv.releaseCapture)
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;
oDiv.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
zhezhao.style.display='none';
};

//h2完美拖拽
h2.onmousedown=function(ev)
{
var oEvent=ev||event;
mouseStart.x=oEvent.clientX;
mouseStart.y=oEvent.clientY;
divStart.x=oDiv2.offsetLeft;
divStart.y=oDiv2.offsetTop;

if(h2.setCapture)
{
h2.onmousemove=doDrag3;
h2.onmouseup=stopDrag3;
h2.setCapture();
}
else
{
document.addEventListener("mousemove",doDrag3,true);
document.addEventListener("mouseup",stopDrag3,true);
}

zhezhao.style.display='block';
};
function doDrag3(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-mouseStart.x+divStart.x;
var t=oEvent.clientY-mouseStart.y+divStart.y;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv2.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv2.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv2.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv2.offsetHeight;
}
oDiv2.style.left=l+"px";
oDiv2.style.top=t+"px";
};
function stopDrag3()
{
if(h2.releaseCapture)
{
h2.onmousemove=null;
h2.onmouseup=null;
h2.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag3,true);
document.removeEventListener("mouseup",stopDrag3,true);
}

zhezhao.style.display='none';
}
//关闭
sClose.onmousedown=function (ev){(ev||event).cancelBubble=true;}
sClose.onclick=function()
{
oDiv2.style.display="none";
};
};
</script>
</head>
<body>
<div id="div2">
<div style="width:100%; height:100%; overflow:hidden;">
<h2><span id="close">关闭</span>完美拖拽</h2>
<p>苹果iPad2吸引了全球不少消费者的关注，大家都希望第一时间体验苹果iPad2。在4月29日，中国香港、澳门在内的亚太地区都开始销售苹果iPad2。但是，作为中国的用户只能通过其他地区代购的渠道才能购买。那么，国内的用户什么时候才能购买呢？据中国苹果公司最新透露，苹果iPad2将于5月6日早上8点将正式对外销售，目前已经开始接受顾客预订。苹果iPad2价格16G版本为3688元，32G版为4488元，64G版为5288 元。一年前，iPad上市时中国定价分别是16G版3988元、32G版本4788元以及64G版本5588元。相同版本的iPad2比当初iPad便宜300元，而且还有白色与黑色两个版本供用户选择。

</p>
<div id="right"></div>
<div id="div1">拖</div>
<div id="bottom"></div>
</div>
</div>
<div id="zhezhao"></div>
</body>
</html> 

分享到:0


原文地址:http://www.corange.cn/archives/2011/05/3767.html

相关推荐