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 ...
随机推荐
- FAILED: Execution Error, return code 2 from org.apache.hadoop
错误遇到的情形: hive整合hbase,hive的数据表 load,select,insert一切正常 通过hive往hbase关联表插入数据的时候报错,错误内容如下: 2016-04-18 14: ...
- HDU 4899 Hero meet devil (状压DP, DP预处理）
题意:给你一个基因序列s(只有A,T,C,G四个字符,假设长度为n),问长度为m的基因序列s1中与给定的基因序列LCS是0,1......n的有多少个? 思路:最直接的方法是暴力枚举长度为m的串,然后 ...
- 简单的jQuery前端验证码校验
简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...
- 激光SLAM Vs 视觉SLAM
博客转载自:https://www.leiphone.com/news/201707/ETupJVkOYdNkuLpz.html 雷锋网(公众号:雷锋网)按:本文作者SLAMTEC(思岚科技公号sla ...
- Linux 性能调优
一.简介 有些时候,我们特别关注程序的性能,特别是底层软件,比如驱动程序,OS等.为了更好的优化程序性能,我们必须找到性能瓶颈点,"好钢用在刀刃上"才能取得好的效果,否则可能白做工 ...
- vue 之 计算属性和侦听器
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rever ...
- 使用paramiko连接EC2主机
在亚马逊云上建的主机没有密码,只有一个PEM文件.所以paramiko需要通过该PEM文件登录云主机进行管理 有两种方式,第一种被我注解了 import paramiko ssh = paramiko ...
- [转载]应用 Valgrind 发现 Linux 程序的内存问题
应用 Valgrind 发现 Linux 程序的内存问题 如何定位应用程序开发中的内存问题,一直是 inux 应用程序开发中的瓶颈所在.有一款非常优秀的 linux 下开源的内存问题检测工具:valg ...
- 读paper笔记[Learning to rank]
读paper笔记[Learning to rank] by Jiawang 选读paper: [1] Ranking by calibrated AdaBoost, R. Busa-Fekete, B ...
- 计算DataTable某列的值(SUM)
参考,如下: