编程之路

——火地晋
  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
jquery 拖动改变div 容器大小

 

使用方法，新建一个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>

 

posted on 2012-02-16 17:12  火地晋  阅读(14455)  评论(0)  编辑  收藏  举报