本文實例為大家分享了jquery拖動改變div大小的具體代碼，供大家參考，具體內容如下
<html> <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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
