div的拖拉拽

最新推荐文章于 2024-05-06 14:28:57 发布

liu---shui

最新推荐文章于 2024-05-06 14:28:57 发布

阅读量1k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/liushuiziyouliu/article/details/82897053

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>div width resize</title>
  <!--引用jquery-->
  <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function bindResize(el) {
//初始化参数
      var els = document.getElementById('menu').style;
//鼠标的 X 和 Y 轴坐标
      x = 0;
//邪恶的食指
      $(el).mousedown(function (e) {
//按下元素后，计算当前鼠标与对象计算后的坐标
        x = e.clientX - el.offsetWidth - $("#menu").width();
//在支持 setCapture 做些东东
        el.setCapture ? (
//捕捉焦点
            el.setCapture(),
//设置事件
                el.onmousemove = function (ev) {
                  mouseMove(ev || event);
                },
                el.onmouseup = mouseUp
        ) : (
//绑定事件
            $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
        );
//防止默认事件发生
        e.preventDefault();
      });

//移动事件
      function mouseMove(e) {
//宇宙超级无敌运算中...
        els.width = e.clientX - x + 'px';
      }

//停止事件
      function mouseUp() {
//在支持 releaseCapture 做些东东
        el.releaseCapture ? (
//释放焦点
            el.releaseCapture(),
//移除事件
                el.onmousemove = el.onmouseup = null
        ) : (
//卸载事件
            $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
        );
      }
    }

    var divResize = function () {
      var totalHeight = $("html").height();
      console.log(totalHeight);
      var topHeight = $("#top").height()
      $("#menu").height(totalHeight - topHeight);
      $("#rightbar").height(totalHeight - topHeight);
    }
    $(function () {
      divResize();
      $(window).resize(divResize);

      bindResize(document.getElementById('rightbar'));
    });
  </script>
  <style type="text/css">
    .content {
      width: 200px;
      background: #f1f1f1;
      text-align: center;
      border-color: #CCCCCC;
      border-style: solid;
      border-width: 0 1px;
    }
  </style>
</head>
<body style="padding: 0; margin: 0;">
<!--
<table style="height: 100%">
<tr>
<td id="menu" class="content"></td>
<td id="rightbar"
style="width: 2px; background: #cccccc; cursor: e-resize;"></td>
</tr>
</table>
-->
<div>
  <div id="top" style="width: 100%; height: 80px;"></div>
  <div style="float: left;" id="menu" class="content">
    <span>待拖拽的div</span>
  </div>
  <div id="rightbar"
       style="width: 1px; background: #cccccc; cursor: e-resize; float: left;"></div>
</div>
<div id="right">
  右边的div
</div>
</body>
</html>

效果图：

可拖动中间线，拖拉控制左右的宽度。

liu---shui

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
div的拖拉拽

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html style="height:100%;"&gt;&lt;head&gt; &lt;meta http-equiv="Content-T
复制链接

扫一扫

专栏目录