1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery 版“元素拖拽改变大小”原型 </title>
  6. <script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
  7. <script type="text/javascript">
  8.     /*
  9.      * jQuery.Resize by wuxinxi007
  10.      * Date: 2011-5-14
  11.      * blog : http://wuxinxi007.cnblogs.com/
  12.      */
  13.     $(function(){
  14.         //绑定需要拖拽改变大小的元素对象
  15.         bindResize(document.getElementById('test'));
  16.     }); 
  17.  
  18.     function bindResize(el){
  19.         //初始化参数
  20.         var els = el.style,
  21.             //鼠标的 X 和 Y 轴坐标
  22.             x = y = 0;
  23.         //邪恶的食指
  24.         $(el).mousedown(function(e){
  25.             //按下元素后，计算当前鼠标与对象计算后的坐标
  26.             x = e.clientX - el.offsetWidth,
  27.             y = e.clientY - el.offsetHeight;
  28.             //在支持 setCapture 做些东东
  29.             el.setCapture ? (
  30.                 //捕捉焦点
  31.                 el.setCapture(),
  32.                 //设置事件
  33.                 el.onmousemove = function(ev){
  34.                     mouseMove(ev || event)
  35.                 },
  36.                 el.onmouseup = mouseUp
  37.             ) : (
  38.                 //绑定事件
  39.                 $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)
  40.             )
  41.             //防止默认事件发生
  42.             e.preventDefault()
  43.         });
  44.         //移动事件
  45.         function mouseMove(e){
  46.             //宇宙超级无敌运算中...
  47.             els.width = e.clientX - x + 'px',
  48.             els.height = e.clientY - y + 'px'
  49.         }
  50.         //停止事件
  51.         function mouseUp(){
  52.             //在支持 releaseCapture 做些东东
  53.             el.releaseCapture ? (
  54.                 //释放焦点
  55.                 el.releaseCapture(),
  56.                 //移除事件
  57.                 el.onmousemove = el.onmouseup = null
  58.             ) : (
  59.                 //卸载事件
  60.                 $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
  61.             )
  62.         }
  63.     }
  64. </script>
  65. <style type="text/css">
  66. #test{
  67.     position:absolute;
  68.     top:0;left:0;
  69.     width:200px;
  70.     height:100px;
  71.     background:#f1f1f1;
  72.     text-align:center;
  73.     line-height:100px;
  74.     border:1px solid #CCC;
  75.     cursor:move;
  76. }
  77. </style>
  78. </head> 
  79.  
  80. <body>
  81.     <div id="test">dgdg</div>
  82. </body>
  83. </html>

我当时用的时候，还要根据目前拖动的div的宽度来改变另一div的位置宽度等等，我就在 函数 mouseMove 下 加了这 $(".class").css("margin-left","你要加的值")；就可以搞成联动了。

出处：http://liucuan.iteye.com/blog/1328215

jquery 拖动改变div大小的更多相关文章

  1. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  2. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  3. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  4. jQuery鼠标拖曳改变div大小（模拟textarea右下角拖曳）

    jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...

  5. jquery动态调整div大小使其宽度始终为浏览器宽度

    需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,下面是具体实现,大家可以参考下 有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点 ...

  6. 模仿iframe框架，由分隔栏动态改变左右两侧div大小———基于jQuery

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  7. JS 实现 ResizeBar，可拖动改变两个区域(带iframe)大小

    将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...

  8. div大小如何改变设置

    如果改变更改div大小尺寸. 首先我们要知道DIV大小是由高和宽确定,要修改DIV容积大小我们设置css宽度和css高度即可实现改变DIV盒子大小. 一.改变div大小实例 为了实验便于观察DIV盒子 ...

  9. 任意表格(table)实现拖动列(column)改变列大小

    直接上代码吧,原理可以看我上一篇博文.本实现基于jquery,完美实现拖动改变表格的列大小功能,只需将代码放置在你页面的底部即可(jquery必须先引入). $(function () { var i ...

随机推荐

  1. C++知识点总结(6)

    1.double和float的存储方式 float遵从的是IEEE R32.24 ,而double 遵从的是R64.53.无论是单精度还是双精度在存储中都分为三个部分: 符号位(Sign) : 0代表 ...

  2. ActiveMQ (一) 介绍与安装

    ActiveMQ是消息中间件的一种 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provide ...

  3. 机器人自主移动的秘密：SLAM与路径规划有什么关系？（三）

    博客转载自:https://www.leiphone.com/news/201612/lvDXqY82OGNqEiyl.html 雷锋网(公众号:雷锋网)按:本文作者SLAMTEC(思岚科技公号sla ...

  4. R: 用 R 查看、管理文件(夹)

    文件管理主要函数: list.files( ): 查看当前目录下文件. file.show( ): 显示文件. file.access( ): 查看文件是否可读可写. file.create( ): ...

  5. Django框架 之 ORM 常用字段和参数

    Django框架 之 ORM 常用字段和参数 浏览目录 常用字段 字段合集 自定义字段 字段参数 DateField和DateTimeField 关系字段 ForeignKey OneToOneFie ...

  6. CodeForces 402D Upgrading Array (数学+DP)

    题意:给出一个数列,可以进行一种操作将某一个前缀除去他们的gcd,有一个函数f(x),f(1) = 0 , f(x) = f(x/p)+1,f(x) = f(x/p)-1(p是坏素数), 求 sum( ...

  7. 非阻塞socket与epoll

    阻塞socket. –阻塞调用是指调用结果返回之前,当前线程会被挂起.函数只有在得到结果之后才会返回. –对于文件操作read,fread函数调用会将线程阻塞. –对于socket,accept与re ...

  8. HTML与CSS入门经典(第9版)试读 附随书源码 pdf扫描版​

    HTML与CSS入门经典(第9版)是经典畅销图书<HTML与CSS入门经典>的最新版本,与过去的版本相同,本书采用直观.循序渐进的方法,为读者讲解使用HTML5与CSS3设计.创建并维护世 ...

  9. jQuery 插件开发——GridData（表格）

    导读:我个人认为做开发最幸福的事之一就是设计一套属于自己的控件,老早之前就想去做这样的事情,一直碍于事件的冲突和个人的想法,最终没有定论,最近难得抽出一些空隙,去完成这件事情.其实自定义控件并不是难事 ...

  10. ConfigParser简介

    一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.section 下面为类似于key-value 的配置 ...