思路：采用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. 如何在 CentOS7 中安装 Nodejs

    一.安装Nodejs 安装版本:10.13.0 1.安装必要的编译软件包 yum -y install gcc gcc-c++ 2.从源码下载Nodejs cd /usr/local/src wget ...

  2. iOS自动化探索（六）自动化测试框架pytest - fixtures

    Fixture介绍 fixture是pytest特有的功能,它用pytest.fixture标识,定义在函数前面.在编写测试函数的时候,可以将此函数名称做为传入参数,pytest将会以依赖注入方式,将 ...

  3. 【MAVEN】笔记

    引言 Maven是Java项目开发中的重要组成部分,了解它学习它是我们的必修课. Maven是什么? Maven是一个项目管理和综合工具.Maven是标准化的产物,使用标准的目录结构和默认构建生命周期 ...

  4. [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置

    [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置 https://github.com/dotnet-architecture/eShopOnContain ...

  5. L137

    Uncontacted Tribes at Risk Amid ‘Worrying' Surge in Amazon Deforestation Illegal loggers and militia ...

  6. New Concept English three （30）

    27W/m 32 words the death of ghost For years, villagers believed that Endley Farm was hunted. The far ...

  7. 通过TortoiseSVN checkout的文件前面没有“状态标识”

    问题描述:安装完成VisualSVN Server.VisualSVn和TortoiseSVN后,然后通过SVN Server新建Repository(仓库),用Visual Studio新建一个So ...

  8. Arcgis andoid开发之应用百度地图接口实现精准定位与显示

    怀着激动.兴奋的心情,在这个漫天柳絮的季节写下了这片博文,为什么呢,因为困扰我很久的一个技术性的问题得到了解决,发次博文,供大家参观.学习,同时,也以慰藉我长期困扰的心情,好了,废话不再,言归正传,看 ...

  9. 修改maven仓库位置

    在eclipse中安装好maven2的插件后: 第一步: 默认会放在~/.m2/repository目录下 (“~”代表用户的目录,比如windows7下一般都是C:\Users\zz\.m2\rep ...

  10. 10.排序数组中和为给定值的两个数字[Find2NumbersWithGivenSum]

    [题目] 输入一个已经按升序排序过的数组和一个数字,在数组中查找两个数,使得它们的和正好是输入的那个数字.要求时间复杂度是O(n).如果有多对数字的和等于输入的数字,输出任意一对即可. 例如输入数组1 ...