思路：采用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. python中的mysql操作

    一. 数据库在自动化测试中的应用 存测试数据 有的时候大批量的数据,我们需要存到数据库中,在测试的时候才能用到,测试的时候就从数据库中读取出来.这点是非常重要的! 存测试结果 二. python中的数 ...

  2. 十二 web爬虫讲解2—Scrapy框架爬虫—Scrapy模拟浏览器登录—获取Scrapy框架Cookies

    模拟浏览器登录 start_requests()方法,可以返回一个请求给爬虫的起始网站,这个返回的请求相当于start_urls,start_requests()返回的请求会替代start_urls里 ...

  3. 《转》浅谈EJB

    ejb一直是一个让我很纠结的技术,虽然ejb作为sun推荐的最佳实践,在sun的J2EE教程中,推荐jsp和servlet作为view层,ejb作为业务逻辑层. 上述就是J2EE教程讲J2EE体系中J ...

  4. 《模式 工程化实现及扩展 (设计模式 C#版)》 - 书摘精要

    (P3) 面向对象的典型原则可以划分为两类 —— “面向类”的和“面向包”的: “面向类”的,包括:SRP —— 单一职责原则:OCP —— 开放封闭原则:LSP —— 里氏替换原则:DIP —— 依 ...

  5. win7 秘钥

    链接 安装好Windows7后右击计算机--属性--更改产品密匙 输入以下密匙; RHTBY-VWY6D-QJRJ9-JGQ3X-Q2289 HT6VR-XMPDJ-2VBFV-R9PFY-3VP7R ...

  6. macOS Ruby版本需要升级到2.2.2以上

    在安装 Ruby on Rails 时遇到问题,提示依赖 ruby 2.2.2 或更高的版本. ERROR: Error installing rails: activesupport require ...

  7. JavaScript中的二分法插入算法

    算法主体部分 var OnlineUser = { //list : 待查找的数组 //key : 待插入的值 //order : 数组的顺序 1:从小到大 0:从大到小 //start : 开始查找 ...

  8. np基本函数大全

    Numpy是科学计算库,是一个强大的N维数组对象ndarray,是广播功能函数.其整合C/C++.fortran代码的工具 ,更是Scipy.Pandas等的基础 .ndim :维度 .shape : ...

  9. LA3890 Most Distant Point from the Sea

    题意 PDF 分析 可以二分答案,检验就用半平面交,如果平面非空则合法. 时间复杂度\(O(T n \log^2 n)\) 代码 #include<iostream> #include&l ...

  10. php与JAVA的RSA加密互通

    Java 版本RSA 进行加密解密 在网上查询了好几天,最终找到解决方案,网络上都是通过Cipher.getInstance("RSA"); 而改成Cipher.getInstan ...