div框,左右拖动
<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框,左右拖动的更多相关文章
- 用CSS3实现带小三角形的div框(不用图片)
现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...
- 完美解决bootstrap模态框允许拖动后拖出边界的问题
使用bootstrap3版本 在网上看了很多方法,我觉得jquery-ui的实现方法是最简单有效的,具体实现方法 1.下载并引入jquery-ui插件 2.全局添加模态框允许拖动事件 $(docume ...
- vue封装一个简单的div框选时间的组件
记录一下我前段时间封装的一个vue组件吧.技术需要积累,有时间我把我之前写的还不错的组件都开源出来.并尝试vue和react 两种方式的组件封装.今天简单写下鼠标框选div选中效果的封装吧. div框 ...
- [TimLinux] JavaScript 模态框可拖动功能实现——jQuery版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 实现可调整宽高的DIV(左右拖动和上下拖动)
前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...
- JavaScript中,让一个div在固定的父div中任意拖动
1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...
- [TimLinux] JavaScript 模态框可拖动功能实现——节流版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- [TimLinux] JavaScript 模态框可拖动功能实现——原始版
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 头像修改功能 包含ios旋转图片 但是旋转后没遮罩, 正常图片可以显示遮罩 宽高不规则图片没做控制 遮罩框可以拖动
https://blog.csdn.net/wk767113154/article/details/77989544 参考资料 <template> <div id="p ...
随机推荐
- Ubuntu如何安装谷歌Chrome浏览器
这里提供一个Ubuntu安装谷歌浏览器的简单方法. 1. 下载谷歌浏览器安装包 wget https://dl.google.com/linux/direct/google-chrome-stable ...
- Django 与 Flask框架的比较
Django Django恐怕是最有代表性的Python框架了.它是一个遵循MMVC架构模式的开源框架.它的名字来自Django Reinhardt,一个法国作曲家和吉他演奏家,很多人认为他是历史上最 ...
- python--内置函数、匿名函数、递归调用
匿名函数 有名函数: def func1(x): print(func1) 结果: <function func1 at 0x00000000005C3E18> 匿名函数: func2=l ...
- python--函数的返回值、函数参数的使用、名称空间与作用域、函数嵌套、函数对象
今天学习内容有函数的返回值.函数参数的使用.名称空间与作用域.函数嵌套. 下来我们一一查看. 函数的返回值 看几个栗子: def func(x): y=func() print(y) def foo( ...
- AcWing 230. 排列计数 水题(组合数+错排)打卡
题目:https://www.acwing.com/problem/content/232/ #include<bits/stdc++.h> #define ll long long #d ...
- 洛谷 P2522 [HAOI2011]Problem b (莫比乌斯反演+简单容斥)
题目描述 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 输入输出格式 输入格式: 第一行一个整数 ...
- 如何将当前平台升级到SonarQube7.9?[最新]
整体思路 准备测试数据(实际环境可跳过此步骤) 数据库迁移(从版本7.9开始,SonarQube将不再支持MySQL,Mysql-->PG) Sonar版本升级(6.7.7 -> 7.9. ...
- centos 安装 Lamp(Linux + Apache + PHP) 并安装 phpmyadmin
来源:http://www.laozhe.net/302.html 一般情况下,安装的都是最新的正式版,除非你有特殊需求,要安装指定的版本,本文暂不讨论.从最基础的开始,一点点完成一个可用的 Linu ...
- 使用js在页面上新建文件夹
使用js在页面上新建文件夹 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- django 之模板层
1. 模板语法之变量 格式:{{ 变量名 }} 句点符,深度查询(可以点到方法,不要加括号,只能是无参的方法) 代码 视图函数: from django.shortcuts import render ...