思路：采用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. 【第13届景驰-埃森哲杯广东工业大学ACM程序设计大赛-L】用来作弊的药水

    链接:https://www.nowcoder.com/acm/contest/90/L来源:牛客网 输入x,a,y,b,(1<=x,a,y,b<=10^9)判断x^a是否等于y^b 前面 ...

  2. 配置 Web 组件服务器 IIS 证书

    用 IIS 6 配置 Web 组件证书(对于 Windows Server 2003)     使用 IIS 管理器向 Web 组件服务器分配证书.对合并池配置中的 Standard Edition ...

  3. 数据库设计系列之四--ER图

    逻辑设计是做什么? 1.将需求转化为数据库的逻辑模型 2.通过ER图的型式对逻辑模型进行展示 3.同所选用的具体的DBMS系统无关

  4. LeetCode OJ：Remove Duplicates from Sorted List （排好序的链表去重）

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...

  5. React 源码剖析系列 － 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...

  6. 理解 EventLoop

    链接 链接 node 浏览器 执行顺序有差异 macrotask microtask 一个线程会有 堆 栈 消息队列;  栈函数执行是用的, 堆用了存放定义的对象, 消息队列来处理异步的操作 a() ...

  7. phpcms内容限制（转发自王小明爱红领巾）

    因为页面显示需要对文章内容做剪切,所以用到{str_cut($r[content],60)},但是出现了乱码 所以 {str_cut(strip_tags($r[content]),60)}加stri ...

  8. C++中标准输入流cin与Ctrl+Z使用时的问题

    今天使用C++编写了一段小程序,练习使用标准库的算法,代码如下: #include <iostream> #include <algorithm> #include <v ...

  9. Wordpress在主题中自定义登陆页面并且禁用自带的登陆页面

    在使用Wordpress制作主题之后,不想要他自带的登陆页面以及地址. 1.新建一个用户页面来接管与登陆相关的动作 //在主题根目录下新建page-login.php,通过action获取用户动作,然 ...

  10. 使用Kali Linux执行中间人攻击(演示)

    中间人攻击也叫Man-In-The-Middle-Attack. 我假设你已经知道中间人攻击的基本概念,引用一段wikipedia: 中间人攻击(Man-in-the-middle attack,缩写 ...