改变div的大小，左右上下可以拉动

最新推荐文章于 2023-03-02 11:45:01 发布

a249130

最新推荐文章于 2023-03-02 11:45:01 发布

阅读量2.6k

点赞数

分类专栏： html 文章标签： div 拉动

本文链接：https://blog.csdn.net/a249130/article/details/54573717

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
      div{width:100px;height:100px;left:100px;top:100px;position:absolute;border:1px solid gray;overflow:hidden}
    </style>
<script type="text/javascript" language="javascript">
function makeResizable(obj){
var d=5;
var l,t,r,b,ex,ey,cur;
obj.attachEvent("onmousedown",mdown);
obj.attachEvent("onmouseup",mup);
obj.attachEvent("onmousemove",mmove);
function mdown(){
    if(event.button==1&&obj.style.cursor){
      obj.resizing=true;
      obj.setCapture();
      }
    }
function mup(){
    if(event.button==1&&obj.resizing){
      obj.resizing=false;
      obj.releaseCapture();
      }
    }
function mmove(){
    if(obj.resizing){
      var dx=event.screenX-ex;
      var dy=event.screenY-ey;
      if(cur.indexOf("w")>-1) l+=dx;
      else if(cur.indexOf("e")>-1) r+=dx;
      if(cur.indexOf("n")>-1) t+=dy;
      else if(cur.indexOf("s")>-1) b+=dy;
      var s=obj.style;
      if(r-l>2*d){
        s.left=l;
        s.width=r-l;
        }
      if(b-t>2*d){
        s.top=t;
        s.height=b-t;
        }
      ex+=dx;
      ey+=dy;
      }
    else if(event.srcElement==obj){
      var x=event.offsetX,y=event.offsetY;
      var c=obj.currentStyle;
      w=parseInt(c.width),h=parseInt(c.height);
      cur=y<d?"n":h-y<d?"s":"";
      cur+=x<d?"w":w-x<d?"e":"";
      if(cur){
        obj.style.cursor=cur+"-resize";
        l=parseInt(c.left);
        t=parseInt(c.top);
        r=l+w;
        b=t+h;
        ex=event.screenX;
        ey=event.screenY;
        }
      else if(obj.style.cursor)
        obj.style.cursor="";
      }
    }
}
</script>
</head>
<body οnlοad="makeResizable(odiv1);makeResizable(odiv2)";>
<div id="odiv1"></div>
<div id="odiv2" style="left:300px"></div>
</body>
</html>

a249130

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
改变div的大小，左右上下可以拉动

Untitled Page div{width:100px;height:100px;left:100px;top:100px;position:absolute;border:1px solid gray;overflow:hidden} function makeResizable(obj){ var d=5; var l,t,r,b,e
复制链接

扫一扫