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