JQuery拖拽元素改变大小尺寸实现代码

"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是所动态改变的对象不同而已，主要在于 top、left、width、height 的运用，相对实现起来也非常容易。以下附出原型，弄明白了原理再扩展其他实际应用，思路就变得简单、清晰得多了

下面是 javascript code

. 代码如下:

<script type="text/javascript">
/*
* jquery.resize by wuxinxi007
* date: 2011-5-14
*/
$(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>