jquery Drag to change the dimensions of the element

"Element Drag to change the size" in fact, and "element drag" a principle, but the dynamic change of the object is different, mainly in the top, left, width, height of the use, relative implementation is also very easy. The following is attached to the source code prototype, to figure out the principle of further expansion of other practical applications, the idea becomes simple, much clearer. First to see the effect: Tahe County Xianqing Machinery

Below is the JavaScript Codeview 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	functionbindResize(el){

12

//初始化参数

13	varels = 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	functionmouseMove(e){

39	//宇宙超级无敌运算中...

40	els.width = e.clientX - x + ‘px‘,

41	els.height = e.clientY - y + ‘px‘

42

}

43

//停止事件

44	functionmouseUp(){

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>

jquery Drag to change the dimensions of the element