JQuery拖拽元素改变大小尺寸
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
.con {
display: flex;
height: 100%;
}
.Parent-left {
width: 150px;
border-right: 1px solid #000000;
}
.Parent-right {
flex: 1;
}
.Parent-left,
.Parent-right {
height: 100%;
}
.ChildL,
.ChildR {
height: 100%;
}
.parLeCon,
.parRiCon {
height: 100%;
width: 99%;
word-break: break-all;
}
.ChildL:hover {
cursor: w-resize
}
.parLeCon:hover {
cursor: auto
}
</style>
</head>
<body>
<div class="con">
<div class="Parent-left">
<div class="ChildL">
<div class="parLeCon">
<p>asdasdasdasasdasdas</p>
</div>
</div>
</div>
<div class="Parent-right">
<div class="ChildR">
<div class="parRiCon">
<p>asdasdasdasasdasdas</p>
</div>
</div>
</div>
</div>
<script src="js/jquery.1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var dragable = false //默认不能拖动
var pageX = $(".ChildL").width() //鼠标拖动的宽度
//鼠标按下事件
$(".ChildL").bind('mousedown', function(e) {
dragable = true
//鼠标弹起事件
$(document).bind('mouseup', function(e) {
if (dragable) {
dragable = false
}
})
//鼠标在元素内部移到时不断触发事件
$(document).bind('mousemove', function(e) {
if (dragable) {
pageX = e.pageX
//设置宽度
$(".Parent-left").width(pageX)
}
})
//阻止默认事件
e.preventDefault()
})
})
</script>
</body>
</html>
JQuery拖拽元素改变大小尺寸的更多相关文章
- iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于Extjs的窗口拖拽，改变大小，背景淡化问题
大部分Extjs的Windows问题:在Extjs4代码中,只要加几句话: frame:true, //这个窗口的边边是圆的 border : false , //窗口没有边框 draggable: ...
- 11个好用的jQuery拖拽拖放插件
这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
- juqery 拖拽元素
转自 http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...
- JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- H5 拖拽元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【Android】自己动手做个扫雷游戏
1. 游戏规则 扫雷是玩法极其简单的小游戏,点击玩家认为不存在雷的区域,标记出全部地雷所在的区域,即可获得胜利.当点击不包含雷的块的时候,可能它底下存在一个数,也可能是一个空白块.当点击中有数字的块时 ...
- 自定义超链接动画---transition
效果图: <a href="#"> <span>HTML</span> </a> a { position: relative; t ...
- 云计算CRM软件厂商，你青睐哪家？
2018年CRM系统软件市场风起云涌,国内外厂商群雄逐鹿.2019年,新一轮的角逐已然展开.据Gartner报告称,CRM客户关系管理系统在2017年全球的销售额首次超越数据库管理系统((Databa ...
- 通过 bsondump 命令工具 解析备份产生的bson文件
bsondump命令是将BSON格式的文件转换为可读性更强的文件格式,例如转为为JSON 格式的文档,bsondump默认转换为json格式的文档. 当通过mongodump命令进行备份时,如果有参数 ...
- 接触新的项目，构建时候报错:Failure to find io.netty:netty-tcnative:jar:${os.detected.classifier}:2.0.7.Final in
详细信息如下: Failure to find io.netty:netty-tcnative:jar:${os.detected.classifier}:2.0.7.Final in http:// ...
- 年末展望：Oracle 对 JDK收费和.NET Core 给我们的机遇
2018年就结束了,马上就要迎来2019年,这一年很不平凡,中美贸易战还在继续,IT互联网发生急剧变化,大量互联网公司开始裁员,微软的市值在不断上升 ,在互联网公司的市值下跌过程中爬到了第一的位置,我 ...
- 【死磕 Spring】—– IOC 之解析Bean：解析 import 标签
原文出自:http://cmsblogs.com 在博客[死磕Spring]----- IOC 之 注册 BeanDefinition中分析到,Spring 中有两种解析 Bean 的方式.如果根节点 ...
- 【死磕 Spring】----- IOC 之 加载 Bean
原文出自:http://cmsblogs.com 先看一段熟悉的代码: ClassPathResource resource = new ClassPathResource("bean.xm ...
- 总结Java常用到的六个加密技术和代码
加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的内容.大体上分为双向加密和单向加密,而双向加密又分为对称加密和非对称加密(有些 ...
- [Inside HotSpot] C1编译器优化：条件表达式消除
1. 条件传送指令 日常编程中有很多根据某个条件对变量赋不同值这样的模式,比如: int cmov(int num) { int result = 10; if(num<10){ result ...