<script type="text/javascript">
function bindResize(el){
//初始化参数
var els = document.getElementById('admin-offcanvas').style;
//鼠标的 X 和 Y 轴坐标
var x = 0;
//邪恶的食指
$(el).mousedown(function (e){
//按下元素后,计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth - $("#admin-offcanvas").width();
//在支持 setCapture 做些东东, //捕捉焦点,//设置事件
el.setCapture ? (el.setCapture(),el.onmousemove = function (ev){
mouseMove(ev || event);},el.onmouseup = mouseUp) : (
//绑定事件
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp));
//防止默认事件发生
e.preventDefault();
});
//移动事件 运算中...
function mouseMove(e){
els.width = e.clientX - x + 'px';
var left = e.clientX - x + 'px';
$("#rightbar").attr("style","width: 5px;height: 100%;background: #cecece; z-index:999;cursor:e-resize;left: "+left+";position: absolute;");
$("#admin_content").attr("style","position: absolute;left: "+left+";top: 0;right: 0;bottom: 0;");
}
//停止事件
function mouseUp(){
//在支持 releaseCapture 做些东东, //释放焦点, //移除事件
el.releaseCapture ? (el.releaseCapture(),el.onmousemove = el.onmouseup = null) : (
//卸载事件
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp));
}
}
var divResize=function(){
var totalHeight=$("html").height();
// console.log(totalHeight);
var topHeight=$("#top").height();
$("#admin-offcanvas").height(totalHeight-topHeight);
$("#rightbar").height(totalHeight-topHeight);
};
$(function() {
divResize();
$(window).resize(divResize);
bindResize(document.getElementById('rightbar'));
});
</script>
            <%--div 1--%>
<div class="admin-sidebar am-offcanvas" id="admin-offcanvas" style="position: absolute;left: 0;top: 0;width: 20%;bottom: 0px;">
内容div 1
</div>
<%--移动边框--%>
<div id="rightbar" style="width: 5px;height: 100%;background: #cecece; cursor: e-resize;z-index:999;left: 330px;position: absolute;"></div>
<%--div 2--%>
<div class="admin-content" id="admin_content" style="position: absolute;left: 20%;top: 0;right: 0;bottom: 0;">
内容div 2
</div>

div框,左右拖动的更多相关文章

  1. 用CSS3实现带小三角形的div框(不用图片)

    现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...

  2. 完美解决bootstrap模态框允许拖动后拖出边界的问题

    使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...

  3. vue封装一个简单的div框选时间的组件

    记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...

  4. [TimLinux] JavaScript 模态框可拖动功能实现——jQuery版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 实现可调整宽高的DIV(左右拖动和上下拖动)

    前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...

  6. JavaScript中,让一个div在固定的父div中任意拖动

    1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...

  7. [TimLinux] JavaScript 模态框可拖动功能实现——节流版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. [TimLinux] JavaScript 模态框可拖动功能实现——原始版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 头像修改功能 包含ios旋转图片 但是旋转后没遮罩, 正常图片可以显示遮罩 宽高不规则图片没做控制 遮罩框可以拖动

    https://blog.csdn.net/wk767113154/article/details/77989544  参考资料 <template> <div id="p ...

随机推荐

  1. docker cassandra集群搭建

    1.使用daocloud的镜像,创建docker集群 启用一个node docker run -d --name cassandra -p 9042:9042 daocloud.io/library/ ...

  2. shell倒计时下班时间

    #!/bin/sh offWorkTime="19:00:00" offWorkHour=${offWorkTime::} offWorkMinute=${offWorkTime: ...

  3. 【纪中集训】2019.08.02【NOIP提高组】模拟 A 组TJ

    \(\newcommand{\RNum}[1]{\uppercase\expandafter{\romannumeral #1\relax}}\) T1 一道可以暴力撵标算的题-- Descripti ...

  4. mybatis generator工具集成(一)

    第一步,pom中加入 <build> <plugins> <plugin> <groupId>org.springframework.boot</ ...

  5. CSS入门之盒模型(六分之四)

    盒模型要点知识 务必注意看,这可是前端面试 必定会遇到 的问题. box-sizing 盒模型的主要CSS属性,除继承外有两个值: content-box 这里不再细说历史原因,只说其作用. cont ...

  6. (转)C语言指针5分钟教程

    转:http://blog.jobbole.com/25409/ 指针.引用和取值 什么是指针?什么是内存地址?什么叫做指针的取值?指针是一个存储计算机内存地址的变量.在这份教程里“引用”表示计算机内 ...

  7. dp的刷表法和填表法

    dp的刷表法和填表法 参考: 动态规划刷表法 - acmer_xue的博客 - CSDN博客http://blog.csdn.net/qq_30241305/article/details/52198 ...

  8. shell从字符串中提取子串(正则表达式)

    通过试验,可以通过grep.sed两种方式实现. 假设需要提取libgcc-4.8.5-4.h5.x86_64.rpm中的版本号. grep echo "libgcc-4.8.5-4.h5. ...

  9. #define学习

    C语言中数据有常量和变量,其中定义常量主要有两种方法,这里主要学习#define定义常量的方法. 1.#define定义数字宏常量 例子如下: 1 2 3 4 5 6 7 8 9 10 #includ ...

  10. java入门经验分享——记面向对象先导课程学习感想

    选择在暑期学习面向对象先导课程的初衷是为大二下学期面向对象课程做一些铺垫,接触入门java语言.在接触java的过程中,就编程语言的学习方法而言,我从刚入学时的手慌脚乱四处寻求帮助到现在慢慢养成了自己 ...