思路：采用flex布局，js即时修改固定列的宽度

注意：父元素需设置position:relative；因offsetLeft和offsetTop是相对于具有定位的（position:absolute或者position：relative）父级元素的距离

html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="./index.css">

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <script src="./index.js"></script>

</head>

<body>

    <div id="box">

        <div id="left">

        </div>

        <div id="line">

            <a id="line1">

                <span><i class="fa fa-caret-right"></i></span>

            </a>

        </div>

        <div id="right">

        </div>

    </div>

</body>

</html>

css：

body {

    font: 14px/1.5 Arial;

    color: #666;

}

#box {

    position: relative;

    width: 600px;

    height: 400px;

    border: 2px solid #000;

    margin: 10px auto;

    overflow: hidden;

    display: flex;

}

#left {

    height: 100%;

    flex:;

    overflow: hidden;

}

#right {

    width: 300px;

    overflow: hidden;

}

#line {

    width: 8px;

    background: lightblue;

    cursor: col-resize;

}

#line a{

    cursor: pointer;

    text-align: center;

}

js：

function $(id) {

    return document.getElementById(id)

}

window.onload = function () {

    var oBox = $("box"),

        oLeft = $("left"),

        oRight = $("right"),

        oLine = $("line"),

        oLine1 = $("line1");

    var flag = true;

    var wid = 0;

    oLine.onmousedown = function (e) {

        var disX = (e || event).clientX;

        var owidth = oBox.clientWidth - oLine.offsetLeft;

        document.onmousemove = function (e) {

            var iT = owidth - ((e || event).clientX - disX);

            var e = e || window.event;

            var maxT = oBox.clientWidth - oLine.offsetWidth;

            oLine.style.margin = 0;

            iT < 30 && (iT = 30);

            iT > maxT && (iT = maxT);

            wid = iT;

            oRight.style.width = iT + "px";

            return false

        };

        document.onmouseup = function () {

            document.onmousemove = null;

            document.onmouseup = null;

            oLine.releaseCapture && oLine.releaseCapture()

        };

        oLine.setCapture && oLine.setCapture();

        return false

    };

    oLine1.onclick = function () {

        if (flag) {

            oRight.style.width =  30 + "px";

            flag = false;

        } else {

            if (wid && wid > 30) {

                oRight.style.width = wid + "px";

            } else {

                oRight.style.width = 300 + "px";

            }

            flag = true;

        }

    }

};

效果如下：

js实现可拖动的布局的更多相关文章

  1. js实现可拖动Div

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...

  2. JS实现元素拖动

    实现1 参考文献:http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html 1.1 拖放效果 <!DOCTYPE html P ...

  3. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

  4. js实现拉伸拖动iframe的具体代码

    这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法 ...

  5. js技术之拖动table标签

    一.js技术之拖动table标签 起因:前几天公司,突然安排一个任务 任务描述:要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置 技术点:采用ui的sortable技术来h ...

  6. JS拖动DIV布局

    方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. JS-slider.js实现鼠标拖动滑块控制取值特效

    制作效果,如下图,鼠标点击颜色标能左右拖动并设置文本框中的值 源码: <div id="example"> <div id="slideContaine ...

  8. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  9. 谈谈Ext JS的组件——容器与布局

    概述 在页面中,比较棘手的地方就是布局.而要实现布局,就得有能维护布局的容器.可以说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最棒的一个,而这得益于它强大的容器类和丰富的 ...

随机推荐

  1. 20165332《Java程序设计》第2周学习总结

    <Java程序设计>第2周学习总结 2-3章学习内容 第二章 标识符(名字) 关键字 int class 基本数据类型 逻辑类型 整数类型 字符类型 浮点类型 各类型相互转换 --低级别给 ...

  2. STL标准容器特征

    一. vector vector类是一种顺序容器,可以看作动态数组,容器中的元素存放在连续存储区域. vector容器自动分配.释放.扩展.收缩存储空间,不需要使用new或delete关键字. vec ...

  3. [转载]Java给word中的table赋值

    一.准备工作: 下载PageOffice for  Java:http://www.zhuozhengsoft.com/dowm/ 二. 实现方法: 要调用PageOffice操作Word中的tabl ...

  4. DOS命令说明

    (转自:http://blog.csdn.net/mydriverc/article/details/2047152) 1 errorlevel dir cd md rd del ren cls ty ...

  5. ARM的异常处理方式

    1.什么是异常? 正常工作之外的流程都叫异常 异常会打断正在执行的工作,并且一般我们希望异常处理完成后继续回来执行原来的工作 中断是异常的一种 2.异常向量表 所有的CPU都有异常向量表,这是CPU设 ...

  6. 关于socket绑定INADDR_ANY

    其中INADDR_ANY就是指定地址为0.0.0.0的地址,这个地址事实上表示不确定地址,或“所有地址”.“任意地址”. 一般情况下,如果你要建立网络服务器,则你要通知服务器操作系统:请在某地址 xx ...

  7. C# 中字段和属性的使用时机

    在C#中,我们可以非常自由的.毫无限制的访问公有字段,但在一些场合中,我们可能希望限制只能给字段赋于某个范围的值.或是要求字段只能读或只能写,或是在改变字段时能改变对象的其他一些状态,这些单靠字段是无 ...

  8. Python爬虫----抓取豆瓣电影Top250

    有了上次利用python爬虫抓取糗事百科的经验,这次自己动手写了个爬虫抓取豆瓣电影Top250的简要信息. 1.观察url 首先观察一下网址的结构 http://movie.douban.com/to ...

  9. OpenCV 视频与图片序列相互转换

    我们在计算机视觉相关的实验中都需要视频与图片序列之间相互转换,在平时的实验中,经常需要将视频保存为一帧一帧的图片,以获取实验结果:另一方面,很多标准的算法测试数据库都是图片序列(文件名以帧号+图片扩展 ...

  10. 2017年--10年java大神告诉你开发最常用的百分之二十的技术有哪些？

    首先题主说的20%我不知道从哪方面去理解.接下来我会将自己多年来工作中会经常使用到的技术列出来. 1.html.css 2.java工作原理(jvm) 3.java语法.数据结构和算法 4.java语 ...