"元素拖拽改变大小"其实和"元素拖拽"一个原理，只是所动态改变的对象不同而已，主要在于 top、left、width、height 的运用，相对实现起来也非常容易。以下附出源码原型，弄明白了原理再扩展其他实际应用，思路就变得简单、清晰得多了。先来看看效果：
下面是 JavaScript Code
01 |
<script type="text/javascript">
|
02 |
/*
|
03 |
* jQuery.Resize by wuxinxi007
|
04 |
* Date: 2011-5-14
|
05 |
*/
|
06 |
$(function(){
|
07 |
//绑定需要拖拽改变大小的元素对象
|
08 |
bindResize(document.getElementById('test'));
|
09 |
});
|
10 |
|
11 |
function bindResize(el){
|
12 |
//初始化参数
|
13 |
var els = el.style,
|
14 |
//鼠标的 X 和 Y 轴坐标
|
15 |
x = y = 0;
|
16 |
//邪恶的食指
|
17 |
$(el).mousedown(function(e){
|
18 |
//按下元素后，计算当前鼠标与对象计算后的坐标
|
19 |
x = e.clientX - el.offsetWidth,
|
20 |
y = e.clientY - el.offsetHeight;
|
21 |
//在支持 setCapture 做些东东
|
22 |
el.setCapture ? (
|
23 |
//捕捉焦点
|
24 |
el.setCapture(),
|
25 |
//设置事件
|
26 |
el.onmousemove = function(ev){
|
27 |
mouseMove(ev || event)
|
28 |
},
|
29 |
el.onmouseup = mouseUp
|
30 |
) : (
|
31 |
//绑定事件
|
32 |
$(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)
|
33 |
)
|
34 |
//防止默认事件发生
|
35 |
e.preventDefault()
|
36 |
});
|
37 |
//移动事件
|
38 |
function mouseMove(e){
|
39 |
//宇宙超级无敌运算中...
|
40 |
els.width = e.clientX - x + 'px',
|
41 |
els.height = e.clientY - y + 'px'
|
42 |
}
|
43 |
//停止事件
|
44 |
function mouseUp(){
|
45 |
//在支持 releaseCapture 做些东东
|
46 |
el.releaseCapture ? (
|
47 |
//释放焦点
|
48 |
el.releaseCapture(),
|
49 |
//移除事件
|
50 |
el.onmousemove = el.onmouseup = null
|
51 |
) : (
|
52 |
//卸载事件
|
53 |
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
|
54 |
)
|
55 |
}
|
56 |
}
|
57 |
</script> |