"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是所动态改变的对象不同而已，主要在于 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>
