首页 > 代码库 > JQuery拖拽改变元素的尺寸

JQuery拖拽改变元素的尺寸

2024-07-28 18:48:05   218人阅读

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

JQuery拖拽改变元素的尺寸


联系
我们