jquery 拖動改變div 容器大小

本文轉載自查看原文 2012-02-16 17:12 13352 html

出處: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 >
     
     < 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 >

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery 拖動改變div大小 jQuery實現鼠標拖動改變Div高度 jQuery實現動態分割div—通過拖動分隔欄實現上下、左右動態改變左右、上下兩個相鄰div的大小鼠標拖動改變DIV等網頁元素的大小的最佳實踐 Div拖動/調整大小實例 div大小如何改變設置 JS--改變div大小 jQuery UI實現div的拖動、縮放功能 jQuery拖拽改變元素大小 Js 鼠標拖拽div改變其大小