<!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. 二分搜索树实现Java的Map(下)

    二分搜索树Map public class BSTMap<K extends Comparable<K>,V> implements Map<K,V> { priv ...

  2. Docker 快速开始

    1.  概念 对于开发人员和系统管理员来说,Docker是一个使用容器开发.部署和运行应用程序的平台.使用Linux容器部署应用程序称为容器化.容器并不新鲜,但是将它们用于轻松部署应用程序却很新鲜. ...

  3. 『调错』OGG Error opening module ggjava_ue.dll

    Win7 配置 OGG (GoldenGate) Adapter Java 时, 报错: ERROR OGG-01122 Oracle GoldenGate Capture, javaue.prm: ...

  4. Unity制作即时战略游戏毕设

    创建项目 双击Unity,选择New Project:我们将它命名为rts,悬着其他本地磁盘例如C:,选择3D然后点击Create Project: 然后我们通过File->Save Scene ...

  5. Oracle 分页查询与数据去重

    1.rownum字段 Oracle下select语句每个结果集中都有一个伪字段(伪列)rownum存在.rownum用来标识每条记录的行号,行号从1开始,每次递增1.rownum是虚拟的顺序值,前提是 ...

  6. redis-dump实现redis库迁移

    最近公司有切换redis库的需求,找了个简单的redis迁移方法,不过也有缺点.就是对于实时性要求很高的redis库迁移无法做到数据的实时同步.不过对于简单的redis库备份和迁移还是可以的,各位看官 ...

  7. 【原】Java学习笔记034 - 网络

    package cn.temptation; import java.net.InetAddress; public class Sample01 { public static void main( ...

  8. 数字信号处理专题（3）——FFT运算初探

    一.前言 FFT运算是目前最常用的信号频谱分析算法.在本科学习数字信号处理这门课时一直在想:学这些东西有啥用?公式推来推去的,有实用价值么?到了研究生后期才知道,广义上的数字信号处理无处不在:手机等各 ...

  9. Windows Server 2016-Hyper-V网络虚拟化概述

    在 Windows Server 2016 和虚拟机管理器中,Microsoft 提供的端到端网络虚拟化解决方案. 有构成了 Microsoft 的网络虚拟化解决方案的五个主要组件: Windows ...

  10. LeetCode算法题-Rotated Digits（Java实现）

    这是悦乐书的第316次更新,第337篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第185题(顺位题号是788).如果一个数字经过180度旋转后,变成了一个与原数字不同的 ...