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程序设计语言（K&R） 笔记1
当作复习... (1)将华氏度 换算成 摄氏度,公式: ℃=(5/9)(̧°F-32) #include <stdio.h> int transformTemprature(int F){ ...
- js中的控制结构for-in语句
var arr=['赵','钱','孙','李']; for(var i=0;i<arr.length;i++){ console.log(arr[i]); } var obj={ name:' ...
- 获取iframe自适应后的宽高
1.同域 一:引入jquery <script type="text/javascript" src="../jquery.min.js">< ...
- IntelliJ IDEA打可运行jar包时的错误
1.[ERROR] 'build.resources.resource.directory' 解决:需要在pom.xml的project->build->resources节点下,加入以 ...
- jQuery 基础 ： 获取对象 根据属性、内容匹配, 还有表单元素匹配
指定元素中包含 id 属性的, 如: $("span[id]") <span id="span1" name="S1">AA ...
- Xshell连接linux（deepin）时提示ssh服务器拒绝了密码，请再试一次解决方法
用Xshell root连接时显示ssh服务器拒绝了密码,应该是应该是sshd的设置不允许root用户用密码远程登录 修改 /etc/ssh/sshd_config文件,注意,安装了openssh才会 ...
- sql 脚本创建索引
之前从没有用SqlServer数据库处理过大数据量的表,都是用Oracle,然后一般为数据量较大的表添加索引或主键都是用plsql工具,今天正好需要为一张保存于SqlServer数据库的千万级数据表增 ...
- Xamarin.Forms(一) 学习笔记
Xamarin.Forms是Xamarin跨平台开发app的跨平台的一个Framework,要使用这套Framework,要从XAML说起. XAML是同通过xml的方式来描述控件和动作,可以通过编译 ...
- 扒一扒spring，dom4j实现模拟实现读取xml
今天leadr提出需求,原来公司项目中读取解析xml文件的代码效率太低,考虑切换一种xml为数据封装格式与读取方式以提高效率.我这灵机一动spring对bean的依赖注入就是读取xml文件,可以尝试扒 ...
- 读《JavaScript权威指南》笔记（三）--对象
1.对象介绍 对象是JavaScript的基本数据类型.对象是一种复合值:它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值.对象也可看做是属性的无序集合,每个属性都是一个名/值对.属性 ...