JQuery拖拽改变元素的尺寸

浏览数：41 / 时间：2015年06月09日

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