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 可调整高度注意:如果属性生效,必须设置元素 ...

随机推荐

[CC-BSTRLCP]Count Binary Strings
[CC-BSTRLCP]Count Binary Strings 题目大意: 对于一个长度为\(n\)的\(\texttt0/\texttt1\)串\(S\),如果存在一个切分\(i\),使得\(S_ ...
Python中join 和 split详解(推荐)
http://www.jb51.net/article/87700.htm python join 和 split方法简单的说是:join用来连接字符串,split恰好相反,拆分字符串的. .join ...
Debian stretch更换国内源
在debian图形化安装过程中就可以选择网络镜像的位置据说电信用清华的源快,移动的用网易源快备份源配置文件: cp /etc/apt/sources.list /etc/apt/sources.l ...
道路 [NOIP模拟]
Description 我们看见了一个由 m 行 n 列的 1*1 的格子组成的矩阵,每个格子(I,j)有对应的高度 h[i][j]和初始的一个非负权值 v[i][j].我们可以随便选择一个格子作为起 ...
Java 接口 Closeable
该接口位于java.io包下,声明如下:public interface Closeable extends AutoCloseable.关闭流并释放与该流关联的所有系统资源.如果已经关闭该流,则调用 ...
PAT Basic 1005
1005 继续(3n+1)猜想 (25 分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...
深入理解JVM（3）——垃圾收集策略详解
Java虚拟机的内存模型分为五部分:程序计数器.Java虚拟机栈.本地方法栈.堆.方法区. 程序计数器.Java虚拟机栈.本地方法栈都是线程私有的,也就是每个线程都拥有这三个区域,而且这三个区域会随着 ...
H5C302
H5C302 1.网络监听端口 ononline及onoffline事件 2.全屏接口注意:在使用时不同浏览器需要添加不同的前缀: chrome:webkit firefox:moz ie:ms o ...
poj2385 Apple Catching（dp状态转移方程推导）
https://vjudge.net/problem/POJ-2385 猛刷简单dp的第一天的第一题. 状态:dp[i][j]表示第i秒移动j次所得的最大苹果数.关键要想到移动j次,根据j的奇偶判断人 ...
C# WebApi+Task+WebSocket实战项目演练(四)
一.课程介绍本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的第四部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理 ...

JavaScript鼠标拖动div且可调整div大小

JavaScript鼠标拖动div且可调整div大小的更多相关文章

随机推荐

热门专题