<!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. Shell中去除字符串前后空格的方法

    [root@local ~]# echo " A BC " A BC [root@local ~]# eval echo " A BC " A BC 或者 [r ...

  2. SpringBoot进阶教程(二十四)整合Redis

    缓存现在几乎是所有中大型网站都在用的必杀技,合理的利用缓存不仅能够提升网站访问速度,还能大大降低数据库的压力.Redis提供了键过期功能,也提供了灵活的键淘汰策略,所以,现在Redis用在缓存的场合非 ...

  3. 对.NET Core未来发展趋势的浅层判断

    经常听到园里.NET开发人员在抱怨生态不如JAVA,想要转JAVA,所谓打不过你,我就加入你!杜兰特的思维方式固然是获取总冠军的一种方式,但是我们要关起门来问自己有没有杜兰特的实力. 用开发生态来类比 ...

  4. I/O基础之概念

    1:I/O流就是常说的输入/输出流,用于数据在内存与存储设备(硬盘,文件等)之间的数据传输. 2 : 分类        根据操作分:输入流与输出流 输入流:将外部设备中的数据(包括网络数据)读入内存 ...

  5. 安卓开发笔记（十九）：异步消息处理机制实现更新软件UI

    主界面代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andr ...

  6. Docker 创建 Crucible4.6.1 以及与 Crowd3.3.2 实现 SSO 单点登录

    目录 目录 1.介绍 1.1.什么是 Crucible? 2.Crucible 的官网在哪里? 3.如何下载安装? 4.对 Crucible 进行配置 4.1.破解 Crucible 第一步 4.2. ...

  7. 【RL-TCPnet网络教程】第38章 TFTP简单文件传输基础知识

    第38章      TFTP简单文件传输基础知识 本章节为大家讲解TFTP(Trivial File Transfer Protocol,简单文件传输协议)的基础知识,方便后面章节的实战操作. (本章 ...

  8. 编辑器开发之 Selection 对象的学习

    上一篇,介绍了 range 对象的一些属性和方法,了解了一些基本操作,现在来介绍另外一个重要的对象:selection 对象: MDN 的解释是:Selection 对象表示用户选择的文本范围或插入符 ...

  9. js node.js 编写命令工具demo

    1 创建文件夹cli-demo 2 执行npm init  3 创建cli.js 文件 内容如下: //js文件变成可执行文件 #!/usr/bin/env node console.log(&quo ...

  10. 测试输出System.err与System.out

    来源:http://www.cnblogs.com/guozp/p/6099902.html 1.System.out在JVM和操作系统都具有缓存功能,输出的东西不一定实时输出,可能积累几个字符才会一 ...