jquery 拖动改变div大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 版“元素拖拽改变大小”原型 </title>
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript">
/*
* jQuery.Resize by wuxinxi007
* Date: 2011-5-14
* blog : http://wuxinxi007.cnblogs.com/
*/
$(function(){
//绑定需要拖拽改变大小的元素对象
bindResize(document.getElementById('test'));
}); function bindResize(el){
//初始化参数
var els = el.style,
//鼠标的 X 和 Y 轴坐标
x = y = 0;
//邪恶的食指
$(el).mousedown(function(e){
//按下元素后，计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth,
y = e.clientY - el.offsetHeight;
//在支持 setCapture 做些东东
el.setCapture ? (
//捕捉焦点
el.setCapture(),
//设置事件
el.onmousemove = function(ev){
mouseMove(ev || event)
},
el.onmouseup = mouseUp
) : (
//绑定事件
$(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)
)
//防止默认事件发生
e.preventDefault()
});
//移动事件
function mouseMove(e){
//宇宙超级无敌运算中...
els.width = e.clientX - x + 'px',
els.height = e.clientY - y + 'px'
}
//停止事件
function mouseUp(){
//在支持 releaseCapture 做些东东
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
)
}
}
</script>
<style type="text/css">
#test{
position:absolute;
top:0;left:0;
width:200px;
height:100px;
background:#f1f1f1;
text-align:center;
line-height:100px;
border:1px solid #CCC;
cursor:move;
}
</style>
</head> <body>
<div id="test">dgdg</div>
</body>
</html>
我当时用的时候，还要根据目前拖动的div的宽度来改变另一div的位置宽度等等，我就在 函数 mouseMove 下 加了这 $(".class").css("margin-left","你要加的值")；就可以搞成联动了。
出处：http://liucuan.iteye.com/blog/1328215
jquery 拖动改变div大小的更多相关文章
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- 鼠标拖动改变DIV等网页元素的大小的最佳实践
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...
- jQuery鼠标拖曳改变div大小（模拟textarea右下角拖曳）
jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...
- jquery动态调整div大小使其宽度始终为浏览器宽度
需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,下面是具体实现,大家可以参考下 有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点 ...
- 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小
将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...
- div大小如何改变设置
如果改变更改div大小尺寸. 首先我们要知道DIV大小是由高和宽确定,要修改DIV容积大小我们设置css宽度和css高度即可实现改变DIV盒子大小. 一.改变div大小实例 为了实验便于观察DIV盒子 ...
- 任意表格(table)实现拖动列(column)改变列大小
直接上代码吧,原理可以看我上一篇博文.本实现基于jquery,完美实现拖动改变表格的列大小功能,只需将代码放置在你页面的底部即可(jquery必须先引入). $(function () { var i ...
随机推荐
- C/C++下测量函数运行时间
C/C++下测量函数运行时间 time.h介绍 C/C++中的计时函数是clock(),而与其相关的数据类型是clock_t. clock_t clock( void ); 这个函数返回从" ...
- windows 获取本机(全部)IPv4、IPv6、MAC地址方法 (C/C++)
windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...
- MD5 加密算法的使用
最近在看视频时,看到 MD5 的加密算法,感觉其在某些重要信息中,还是很好的解决了一些安全问题的.于是,就在自己理解的情况下,实现了 MD5 算法. 具体的流程大致是: (1)将指定的数据首先通过 M ...
- secureCrt常用命令
一.常用命令: 1.ls 只列出文件名 (相当于dir,dir也可以使用) -A:列出所有文件,包含隐藏文件. -l:列表形式,包含文件的绝大部分属性. -R:递归显示. --help:此命令的帮助. ...
- 如何选择RDBMS关系型数据库和Nosql非关系型数据库？
RDBMS关系型数据库和Nosql非关系型数据库区别: 一.RDBMS是关系型数据库模式: 1.二维模式,由行列组成. 2.非常强调事务原子性,例如用户提出一个请求,DB完整的去执行,如果报错就全部回 ...
- Struts2框架05 result标签的类型、拦截器
1 result标签是干什么的 就是结果,服务器处理完返回给浏览器的结果:是一个输出结果数据的组件 2 什么时候需要指定result标签的类型 把要输出的结果数据按照我们指定的数据类型进行处理 3 常 ...
- ZROI2018普转提day6t3
传送门 分析 居然卡哈希数,万恶的出题人...... 感觉我这个方法似乎比较呆,我的代码成功成为了全网最慢的代码qwq 应该是可以直接哈希的 但由于我哈希学的不好又想练练线段树维护哈希,于是就写了个线 ...
- Django框架 之 ORM查询操作详解
Django框架 之 ORM查询操作详解 浏览目录 一般操作 ForeignKey操作 ManyToManyField 聚合查询 分组查询 F查询和Q查询 事务 Django终端打印SQL语句 在Py ...
- DIY的RPM包怎么签名呢 - 笔记
参考 https://gist.github.com/fernandoaleman/1376720 如果打不开上一个连接,请参考https://www.cnblogs.com/LiuYanYGZ/p/ ...
- ISIS协议
ISIS协议是中间系统到中间系统协议(Intermediate system to intermediate system),是一种内部网管协议,是电信运营商普遍采用的内部网管协议之一. 简单的说IS ...