一個非常簡單的例子,體驗效果：http://keleyi.com/keleyi/phtml/jqtexiao/29.htm
以下是完整代碼，保存到HTML文件打開也可以體驗效果。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>jQuery 版“元素拖拽改變大小”原型-柯樂義 </title> 6 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script> 7 <script type="text/javascript"> 8 /* 9 * jQuery.Resize 10 * Date: 2014-12-04 11 * http://keleyi.com/ 12 */ 13 $(function () { 14 //綁定需要拖拽改變大小的元素對象 15 bindResize(document.getElementById('kel'+'eyi')); 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 #keleyi{ 67 position:absolute; 68 top:0;left:0; 69 width:200px; 70 height:100px; 71 background:#f1f1f1; 72 text-align:center; 73 line-height:16px; 74 border:1px solid #CCC; 75 cursor:move; 76 } 77 </style> 78 </head> 79 80 <body> 81 <div id="keleyi">柯樂義：請按住本灰色區域並拖拽.<a href="http://keleyi.com/a/bjad/yy8jnwqj.htm" target="_blank">原文</a>.本效果支持各種瀏覽器，入Chrome,FireFox,IE,Opera等</div> 82 </body> 83 </html>