思路：采用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. puppet笔记

    简介: puppet是一种Linux.Unix平台的集中配置管理系统,使用ruby语言,可管理配置文件.用户.cron任务.软件包.系统服务等.puppet把这些系统实体称之为资源,puppet的设计 ...

  2. 【枚举】【最小生成树】【kruscal】bzoj3754 Tree之最小方差树

    发现,若使方差最小,则使Σ(wi-平均数)2最小即可. 因为权值的范围很小,所以我们可以枚举这个平均数,每次把边权赋成(wi-平均数)2,做kruscal. 但是,我们怎么知道枚举出来的平均数是不是恰 ...

  3. MongoDB 可视化管理工具 MongoCola-1.1.0 测试版发布

    首先,感谢大家对于本工具的支持. 经过一周的努力,最新版的工具测试版出炉了,这个版本是一个很重要的版本. 为什么说这个版本重要?以前的工具,只支持一个视图窗口,也就是说了,一次只能看一个数据集的数据. ...

  4. New Concept English three （43）

    30 54 Insurance companies are normally willing to insure anything. Insuring public or private proper ...

  5. 目标跟踪之ECO：Efficient Convolution Operators for Tracking

    一. 相关滤波算法总结 作者首先分析了 影响相关滤波算法效率 和 导致过拟合 的几个原因: 1)Model Size (模型大小) 包括两个方面: - 模型层数,对应多分辨率 Sample,比如多层 ...

  6. Windows手动安装Apache，MySql服务

    绿色版的Apache,Mysql需要以服务方式运行.或者由于某种原因服务管理器里面没有服务项了,可以进行手工注册服务和启并服务. # Apache Apache进到安装目录的bin目录下,运行dos命 ...

  7. 旧书重温：0day2【7】堆溢出实验

    相关文章我拍成了照片,放在了我的QQ空间不是做广告(一张一张的传太麻烦了)http://user.qzone.qq.com/252738331/photo/V10U5YUk2v0ol6/    密码9 ...

  8. bzoj 4987 Tree

    Written with StackEdit. Description 从前有棵树. 找出\(K\)个点\(A_1,A_2,-,A_K\). 使得\(∑dis(A_i,A_{i+1}),(1<= ...

  9. 使用Metaspoit攻击MS08-067

    kali视频学习请看 http://www.cnblogs.com/lidong20179210/p/8909569.html 使用Metaspoit攻击MS08-067 MS08-067漏洞的全称为 ...

  10. 把UIImage保存到照片库和沙盒中

    1.保存到iOS照片库需要引入QuartzCore.framework框架,具体代码如下: .h文件 #import <QuartzCore/QuartzCore.h> UIImageVi ...