JavaScript鼠标拖动div且可调整div大小
http://www.softwhy.com/article-5502-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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;
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;
}
</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 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';
}
};
</script>
</head>
<body>
<div id="div2">
<div style="width:100%;height:100%;overflow:hidden;">
<h2>蚂蚁部落</h2>
<p>蚂蚁部落欢迎您，只有努力奋斗才会有美好的未来</p>
<div id="right"></div>
<div id="div1">拖</div>
<div id="bottom"></div>
</div>
</div>
<div id="zhezhao"></div>
</body>
</html>
JavaScript鼠标拖动div且可调整div大小的更多相关文章
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- 使用JS制作一个鼠标可拖的DIV（一）——鼠标拖动
使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...
- [置顶] 原创鼠标拖动实现DIV排序
先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:http://blog.csdn.net/littlebo01/article/details/12 ...
- 鼠标指向GridView某列显示DIV浮动列表
需求: 当GRIDVIEW数据列过多,不方便全部显示在同一行或者一些子信息需要鼠标指向某关键列GRIDVIEW的时候显示其子信息. 设计:先把需要显示的浮动数据一次过抓取出来.而不是鼠标指向的时候才从 ...
- 禁止鼠标多次点击选中div中的文字
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...
- Qt——鼠标拖动调整窗口大小
要求:鼠标移到界面边角时,鼠标样式相应地发生改变. 实现方法一: 重写mouseMoveEvent,如果鼠标没有按下,则根据鼠标在界面上的位置设置鼠标样式,如果鼠标按下,则根据位置判断该怎样调整界面大 ...
- CSS3 resize属性 调整div大小
resize 用户可调整div大小 IE不支持 none 不可调整元素尺寸 both 可调整宽度高度 horizontal 可调整宽度 vertical 可调整高度 注意:如果属性生效,必须设置元素 ...
随机推荐
- [PA2014]Fiolki
[PA2014]Fiolki 题目大意: 有\(n(n\le2\times10^5)\)种不同的液体物质和\(n\)个容量无限的药瓶.初始时,第\(i\)个瓶内装着\(g_i\)克第\(i\)种液体. ...
- 在mongoose中使用正则，参数为变量时的写法
const word = ctx.params.word userModel.find({"name":{$regex: eval(`/${word}/ig`)}}) 如果mong ...
- [BZOJ3339]Rmq Problem / mex
Description: 有一个长度为n的数组{a1,a2,-,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. Hint: \(n \le 2*10^5\) Solution: 主席树好 ...
- 高速公路 [HAOI2012] [线段树]
Description Y901高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这条高速公路上设立了许多收费站. Y901高速公路是一条由N-1段路以及N个 ...
- MyBatis 命名空间与命名解析
命名空间 使用完全限定名来进一步区分语句. 命名解析 为了减少输入量,MyBatis 对所有的命名配置元素(包括语句,结果映射,缓存等)使用如下的命名解析规则: 完全限定名(比如“com.mypack ...
- Java集合框架(简介明了)
对于集合类,主要需要掌握的就是它的内部结构,以及遍历集合的迭代模式. 接口:Collection Collection是最基本的集合接口,一个Collection代表一组Object,即Collect ...
- Hadoop2之NameNode HA详解
在Hadoop1中NameNode存在一个单点故障问题,如果NameNode所在的机器发生故障,整个集群就将不可用(Hadoop1中虽然有个SecorndaryNameNode,但是它并不是NameN ...
- JDBC（10）—批处理
批量处理JDBC语句,提高处理速度. 当需要成批的的插入或更新记录时可以采用java的批量更新机制,这一机制允许多条语句一次性提交给数据库批量处理,通常情况下比单独提交处理更有效率. 批量处理的方法: ...
- ASP.NET WebApi 基于OAuth2.0实现Token签名认证
一.课程介绍 明人不说暗话,跟着阿笨一起玩WebApi!开发提供数据的WebApi服务,最重要的是数据的安全性.那么对于我们来说,如何确保数据的安全将是我们需要思考的问题.为了保护我们的WebApi数 ...
- 在 iOS 中信任手动安装的证书描述文件
在 iOS 10.3 及更高版本中,手动安装包含证书有效负载的描述文件时,这个证书不会自动受 SSL 信任. 在安装通过电子邮件发送给您或从网站下载的描述文件时,您必须手动开启受 SSL 信任. ...