JQuery拖拽改变元素的尺寸

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

下面是 JavaScript Code

view source

 

print?

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>