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

使用方法，新建一个html文件，把下面代码复制过去。然后调试就可以看到效果了。

<!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>
    <!--引用jquery-->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></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: 400px; height: 300px; background: #f1f1f1; 
                text-align: center; line-height: 100px; border: 1px solid #CCC; cursor: se-resize; }
    </style>
</head>
<body>
    <div id="test">
        这是内容
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html

jquery 拖动改变div 容器大小相关推荐

  1. php 页面拖动改变大小,鼠标拖动改变DIV等网页元素的大小的实现方法

    1.初次实现 1.1 html代码 div change width by drag div change width by drag 1.2 js代码 var eleLeft = $('#myDiv ...

  2. [html] 如何让img自动适应div容器大小？

    [html] 如何让img自动适应div容器大小? <!DOCTYPE html> <html lang="en"> <head><met ...

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML如何让IMG自动适应DIV容器大小的实现方法

    这篇文章主要介绍了HTML如何让IMG自动适应DIV容器大小的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 为了让IM ...

  5. Jquery实现鼠标拖动改变div高度

    前言 鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做页面美化,可以根据需求做相应修改. 转自:http://www.cnblog ...

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

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

  7. img超出div width时， jQuery动态改变图片显示大小

    参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...

  8. jQuery动态改变图片显示大小(修改)

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此功能的jQuery代码如下.这段代码可以使图片的大小保持 ...

  9. 动态调整div大小 html,如何动态的根据用户屏幕的分辨率改变div的大小？

    我想设计一个 app 产品主页,主页分 3 屏,要求网页会根据用户设备的分辨率自动调整每一屏的大小,例如我现在的 1366*768 则每屏显示 1366*768:如果另外有用户的分辨率是 1280*7 ...

  10. 实现div的大小随着内容进行动态改变

    div的动态改变有两种方式: 1.使用百分比的形式来实现div的动态改变的实现代码: #id{width: 30%;height: 40%; } /* 这样一来,该div的宽度和高度将始终分别对应于浏 ...

最新文章

  1. Zookeeper （一）集群简单搭建
  2. python编程视频-【科研资源03】最全Python编程全套系统视频学习教程
  3. com.android.tools.build:gradle:2.0.0-alpha3 build errors
  4. python 中参数 ，解包和变量的入门
  5. 服务器意外重启导致storm报错的问题处理
  6. .NET IDE Rider公布2020.2路线图
  7. 人群频率 | gnomAD数据库简介 (一)
  8. MOSS字段编辑权限控制方案(2)-添加管理链接
  9. 吃下这枚安利！翠贝卡电影节上这五部VR视频不容错过
  10. bmklocationmanager方法没有回调_关于node中的回调（必学）
  11. Android你可能要用到的自定义View分享
  12. js怎么实现数组里的数据相加_C++如何实现大整数相加
  13. UG二次开发GRIP标准件库
  14. 原生开发、H5开发和混合式开发的区别
  15. 中英文数字混合字符串排序js
  16. C++ API设计笔记
  17. 近期BSN开发常见问题答疑
  18. 10大高权重博客_你知道几个？
  19. Device Tree（七）NAND FLASH
  20. 数组----二维数组

热门文章

  1. CYQ.Data 轻量数据层之路 框架如何应对数据库变化
  2. 深度学习（一）神经网络中的池化与反池化原理
  3. [20180604]在内存修改数据(bbed).txt
  4. java使用jeids实现redis2.6的HyperLogLog数据结构的操作
  5. 递归求解斐波那契fib(10)一共调用了多少次fib()函数
  6. 电商平台实战经验：电商中的Hadoop生态系统应用
  7. Java Date Time 教程-System.currentTimeMillis()
  8. [js插件]分享一个文章内容信息提示插件Colortip
  9. 使用C#语言，从Excel2007中读取数据，并显示到Form中的DataGridView。
  10. excel 文件导入数据库(java)