"元素拖曳改變大小"其實和"元素拖曳"一個原理，只是所動態改變的物件不同而已，主要在於 top、left、width、height 的運用，相對實現起來也非常容易。以下附出源碼原型，弄清楚了原理再擴展其他實際應用，思路就變得簡單、清晰得多了下面是JavaScript Code 複製程式碼 程式碼如下: <BR>/* <BR>* jQuery.Resize by wuxinxi007 <BR>* Date: 2011-5-14 <BR>*/ <BR>$(function(){ <BR>//綁定需要拖曳改變大小的元素物件<BR>bindResize(document.getElementById('test' )); <BR>}); <br><br>function bindResize(el){ <BR>//初始化參數<BR>var els = el.style, <BR>//滑鼠的X 和Y 軸座標<BR>x = y = 0; <BR>//邪惡的食指<BR>$(el).mousedown(function(e){ <BR>//按下元素後，計算當前滑鼠與物件計算後的座標<BR>x = e.clientX - el.offsetWidth, <BR>y = e.clientY - el.offsetHeight; <BR>//在支援setCapture 做些東東<BR>el.setCapture ? ( <BR> //捕捉焦點<BR>el.setCapture(), <BR>//設定事件<BR>el.onmousemove = function(ev){ <BR>mouseMove(ev || event) <BR>}, <BR> el.onmouseup = mouseUp <BR>) : ( <BR>//綁定事件<BR>$(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) <BR>) <BR>//防止預設事件發生<BR>e.preventDefault() <BR>}); <BR>//移動事件<BR>function mouseMove(e){ <BR>//宇宙超級無敵運算... <BR>els.width = e.clientX - x 'px', <BR>els.height = e.clientY - y 'px' <BR>} <BR>//停止事件<BR>function mouseUp(){ <BR>//在支援releaseCapture 做些東東<BR>el.releaseCapture ? ( <BR>//釋放焦點<BR>el.releaseCapture(), <BR>//移除事件<BR>el.onmousemove = el.onmouseup = null <BR>) : ( <BR>//卸載事件<BR>$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) <BR>) <BR>) <BR> >} <BR>} <BR>
