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 ...
随机推荐
- CentOS 本地和网络yum源简单说明及配置
1.简述 Yellow dog Updater, Modified由Duke University团队,修改Yellow Dog Linux的Yellow Dog Updater开发而成,是一个基于R ...
- 01-java前言、入门程序、变量、常量
今日目标 能够计算二进制和十进制数之间的互转 能够使用常见的DOS命令 理解Java语言的跨平台实现原理 jvm是运行java程序的假想计算机,所有的java程序都运行在它上面.java编写的软件可以 ...
- [翻译 EF Core in Action 1.7] MyFirstEfCoreApp访问的数据库
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- 我们为什么要搞长沙.NET技术社区（二）
我们为什么要搞长沙.NET技术社区(二) 某种意义上讲,长沙和中国大部分内地城市一样,都是互联网时代的灯下黑.没有真正意义上的互联网公司,例如最近发布的中国互联网企业一百强中没有一家湖南或者长沙的公司 ...
- [转]MS Excel VBO option missing in Blue Prism
本文转自:https://stackoverflow.com/questions/48706743/ms-excel-vbo-option-missing-in-blue-prism 问: I am ...
- 记录一些flutter学习网址
字体图标生成 http://fluttericon.com/Flutter中文网 https://flutterchina.club Flutter官网 https://flutter.ioFlutt ...
- PyCharm 如何远程连接服务器编写程序
写在前面 我之前一直通过mstsc远程服务器桌面修改代码,或者本地修改后上传到远程服务器等,各种不爽,现在改用xshell,但有时候还是感觉不方便.于是乎,自己动手配置PyCharm远程连接服务器,这 ...
- 关于Django报错django.core.exceptions.ImproperlyConfigured: Requested setting DEBUG, but settings are not configure
报错代码:django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE, but se ...
- js复制粘贴模板
<script> //绑定在了body上,也可以绑定在其他可用元素行,但是不是所有元素都支持copy和past事件. /* $(document.body).bind({ copy: fu ...
- iOS可视化动态绘制八种排序过程(Swift版)
前面几篇博客都是关于排序的,在之前陆陆续续发布的博客中,我们先后介绍了冒泡排序.选择排序.插入排序.希尔排序.堆排序.归并排序以及快速排序.俗话说的好,做事儿要善始善终,本篇博客就算是对之前那几篇博客 ...