<!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拖拽元素改变大小尺寸的更多相关文章

  1. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 关于Extjs的窗口拖拽，改变大小，背景淡化问题

    大部分Extjs的Windows问题:在Extjs4代码中,只要加几句话: frame:true, //这个窗口的边边是圆的 border : false , //窗口没有边框 draggable: ...

  3. 11个好用的jQuery拖拽拖放插件

    这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾 ...

  4. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

  5. juqery 拖拽元素

    转自  http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQue ...

  6. JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图 ...

  7. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  8. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. H5 拖拽元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. TensorFlow从1到2（七）线性回归模型预测汽车油耗以及训练过程优化

    线性回归模型 "回归"这个词,既是Regression算法的名称,也代表了不同的计算结果.当然结果也是由算法决定的. 不同于前面讲过的多个分类算法或者逻辑回归,线性回归模型的结果是 ...

  2. VulDeePecker：基于深度学习的脆弱性检测系统

    最近的两款软件,VUDDY和VulPecker,假阴性率高而假阳性率低,用于检测由代码克隆引发的漏洞.而如果用于非代码克隆引起的漏洞则会出现高误报率. 本文使用深度学习处理程序中的代码片段,不应由专家 ...

  3. 5G 时代，可能是什么样呢？

        (摄于上海陆家嘴) 众所周知,5g时代即将到来,其相关的区块链技术也将在更多的领域以及方面发挥越来越多的作用. 与新模式与新领域这种软性变化不同,新技术的产生,有着足够的想象空间.仅从内容创作 ...

  4. Git思维导图

    EBay全程问了我关于Git的原理, 各种命令行:平常依赖Idea的图形化太严重了,今天仔细总结一下常用的工具:   Git学习的链接: https://book.git-scm.com/ http: ...

  5. 批量数据复制SqlBulkCopy使用经验点滴（特别是超时处理）

    如果要批量复制大量的数据,用ado.net或者其他orm框架逐条读取并写入,有时会耗时太长,满足不了要求,此时SqlBulkCopy就可以出来大显身手了,相信许多人了解或使用过它. 但实际使用时,还是 ...

  6. 在Docker中体验数据库之Microsoft SQL Server

    前面记录了一下在docker中体验mongodb和mysql.今天记录一下mssql……其实早就体验了,就是没有记录,前几天看了一下2019的一些新闻,很喜欢Polybase这个特性,想体验一把,可惜 ...

  7. Android 平台 Native 代码的崩溃捕获机制及实现

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/g-WzYF3wWAljok1XjPoo7w 一.背景 ...

  8. Dapeng框架－开源高性能分布式微服务框架

    我们公司性质是新零售,公司也有专门的框架组.这群大牛自己开发了一整套分布式微服务框架.我们也在使用这套框架,有很多心得体会. 该框架既Dapeng也!开源github地址:https://github ...

  9. 前端性能优化之gzip

    前言: 如果你是个前端开发人员,你肯定知道线上环境要把js,css,图片等压缩,尽量减少文件的大小,提升响应速度,特别是对移动端,这个非常重要.常用的前端性能优化方法有如下几种 一.减少http请求 ...

  10. 配置完IDEA开发lua后用idea竟然打不开lua的文件。

    1.文件没关联上  File > setting > File Types  完成后即可打开lua文件