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 ...
随机推荐
- 框架之 hibernate简单入门
hibernate框架的搭建 Hibernate框架的概述 1. Hibernate框架的概述 * Hibernate称为 * Hibernate是一个开放源代码的对象关系映射(ORM)框架,它对JD ...
- 写一个函数封装printf用作trace
转自http://blog.csdn.net/coder_weisong/article/details/10285291 写一个函数封装printf用作trace 方法一: #inc ...
- 算法Sedgewick第四版-第1章基础-015一stack只保留last指针
/************************************************************************* * * A generic queue, impl ...
- EZOJ #73
传送门 分析 我们知道如果对于模数$P$有$gcd(x,P) = 1$则$x$一定有且仅有一个逆元,可以表示为 $x \equiv \frac{y}{1} (mod P)$ 即为$xy \equiv ...
- ZROI2018提高day6t2
传送门 分析 将所有字母分别转化为1~26,之后将字符串的空位补全为0,?设为-1,我们设dp[p][c][le][ri]表示考虑le到ri个字符串且从第p位开始考虑,这一位最小填c的方案数,具体转移 ...
- Luogu 3627 [APIO2009]抢掠计划
不爽. 为什么tarjan能爆栈啊 十分显然的缩点,给缩点之后的点连上权值为后一个点集权值的有向边,然后spfa跑最长路. 注意一开始$dis_{st}$应该等于$st$这个集合的权值. 时间复杂度$ ...
- cakephp数据库配置
- jquery 仿文本编辑器（智能提示输入文字）
1.前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputAu ...
- HDU 1796 How many integers can you find (容斥)
题意:给定一个数 n,和一个集合 m,问你小于的 n的所有正数能整除 m的任意一个的数目. 析:简单容斥,就是 1 个数的倍数 - 2个数的最小公倍数 + 3个数的最小公倍数 + ...(-1)^(n ...
- fiddler----APP弱网测试
转自:http://www.51testing.com/html/01/n-3727001.html APP弱网模拟测试 移动端测试区别于PC端测试的一点就是网络的多变性:不同的网络环境和网络制式的差 ...