<!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. Scala 隐式转换及应用

    什么是隐式转换 我们经常引入第三方库,但当我们想要扩展新功能的时候通常是很不方便的,因为我们不能直接修改其代码.scala提供了隐式转换机制和隐式参数帮我们解决诸如这样的问题. Scala中的隐式转换 ...

  2. MySQL - 扩展性 2 扩展策略：氪金氪脑任君选

    如果将应用的所有数据简单地放在一台 MySQL 服务器实例上,就不用谈什么扩展性了.但是业务能稳定持续的增长,那么应用肯定会碰到性能瓶颈. 对于很多类型的应用而言,购买更高性能的机器能解决一大部分性能 ...

  3. 用C语言做一个横板过关类型的控制台游戏

    前言:本教程是写给刚学会C语言基本语法不久的新生们. 因为在学习C语言途中,往往只能写控制台代码,而还能没接触到图形,也就基本碰不到游戏开发. 所以本教程希望可以给仍在学习C语言的新生们能提前感受到游 ...

  4. VBC#代码互转工具

    VBCSHARP代码互转工具,适用于VB.NET和C#代码相互转换翻译,可代码段转换和批量文件转换.于2019年3月5日制作完成,允许各群随意分发和使用. 下载地址:下载链接 欢迎使用 下载地址:下载 ...

  5. 结合JDK源码看设计模式——桥接模式

    前言: 在我们还没学习框架之前,肯定都学过JDBC.百度百科对JDBC是这样介绍的[JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Jav ...

  6. ArcGIS API for JavaScript 4.x 本地部署之Nginx法

    上篇ArcGIS API for JavaScript 4.x 离线配置之IIS法提到,如何用IIS配置ArcGIS jsAPI: 本篇则使用http下的Nginx配置,其原理基本一致.https的部 ...

  7. 团队DevOps实践之一

    团队DevOps实践之一 ------------------------------------------------------------------ 今天先到这儿,希望对您技术领导力, 企业 ...

  8. MongDB集群容灾方案步骤

    MongoDB复制集优/特点支持大数据量.高扩展性.高性能.灵活数据模型.高可用性.同步机制数据复制的目的是使数据得到最大的可用性,避免单点故障引起的整站不能访问的情况的发生,Mongodb的副本集在 ...

  9. mysql7笔记----遍历节点所有子节点

    mysql遍历节点的所有子节点 DELIMITER // CREATE FUNCTION `getChildrenList`(rootId INT) ) BEGIN ); ); SET sTemp = ...

  10. spring Boot环境下dubbo+zookeeper的一个基础讲解与示例

    一,学习背景 1.   前言 对于我们不管工作还是生活中,需要或者想去学习一些东西的时候,大致都考虑几点: a)      我们为什么需要学习这个东西? b)     这个东西是什么? c)      ...