[分享] jQuery 版“元素拖拽改变大小”原型

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

 

在引入 Jquery.js 后：

< script type = " text/javascript " >
    $( function (){
         // 绑定需要拖拽改变大小的元素对象
        bindResize(document.getElementById( ' test ' ))
    });
    
     function  bindResize(el){
         // 初始化参数
         var  els  =  el.style,
             // 鼠标的 X 和 Y 轴坐标
            x  =  y  =   0 ;
         // 邪恶的食指
        $(el).mousedown( function (e){
             // 按下元素后，计算当前鼠标与对象计算后的坐标
            x  =  e.clientX  -  el.offsetWidth,
            y  =  e.clientY  -  el.offsetHeight;
             // 在支持 setCapture 做些东东
            el.setCapture  ?  (
                 // 捕捉焦点
                el.setCapture(),
                 // 设置事件
                el.onmousemove  =   function (ev){
                    mouseMove(ev  ||  event)
                },
                el.onmouseup  =  mouseUp
            ) : (
                 // 绑定事件
                $(document).bind( " mousemove " ,mouseMove).bind( " mouseup " ,mouseUp)
            )
             // 防止默认事件发生
            e.preventDefault()
        });
         // 移动事件
         function  mouseMove(e){
             // 宇宙超级无敌运算中...
            els.width  =  e.clientX  -  x  +   ' px ' ,
            els.height  =  e.clientY  -  y  +   ' px '
        }
         // 停止事件
         function  mouseUp(){
             // 在支持 releaseCapture 做些东东
            el.releaseCapture  ?  (
                 // 释放焦点
                el.releaseCapture(),
                 // 移除事件
                el.onmousemove  =  el.onmouseup  =   null
            ) : (
                 // 卸载事件
                $(document).unbind( " mousemove " , mouseMove).unbind( " mouseup " , mouseUp)
            )
        }
    }
< / script>

 

width 和 height 的中不允许出现负数的值，否则会报错，那么根据这个需求简单扩展了一个“限制最小高宽”的小实例：

< script type = " text/javascript " >
    $( function (){
         // 绑定需要拖拽改变大小的元素对象
        bindResize(document.getElementById( ' test ' ), 200 , 100 );
    });
     // 绑定需要拖拽改变大小的元素对象
     // el 元素对象
     // minW 最小宽度
     // minH 最小高度
     function  bindResize(el,minW,minH){
         // 初始化参数
         var  els  =  el.style,
             // 鼠标的 X 和 Y 轴坐标
            x  =  y  =  Xm  =  Ym  =   0 ;
         // 邪恶的食指
        $(el).mousedown( function (e){
             // 按下元素后，计算当前鼠标与对象计算后的坐标
            x  =  e.clientX  -  el.offsetWidth,
            y  =  e.clientY  -  el.offsetHeight;
             // 在支持 setCapture 做些东东
            el.setCapture  ?  (
                 // 捕捉焦点
                el.setCapture(),
                 // 设置事件
                el.onmousemove  =   function (ev){
                    mouseMove(ev  ||  event)
                },
                el.onmouseup  =  mouseUp
            ) : (
                 // 绑定事件
                $(document).bind( " mousemove " ,mouseMove).bind( " mouseup " ,mouseUp)
            )
             // 防止默认事件发生
            e.preventDefault()
        });
         // 移动事件
         function  mouseMove(e){
             // 宇宙超级无敌运算中...
            Xm  =  e.clientX  -  x,
            Ym  =  e.clientY  -  y;
             // 限制高宽
            Xm  <=  minW  &&  (Xm  =  minW),
            Ym  <=  minH  &&  (Ym  =  minH);
             // 设置大小
            els.width  =  Xm  +   ' px ' ,
            els.height  =  Ym  +   ' px '
        }
         // 停止事件
         function  mouseUp(){
             // 在支持 releaseCapture 做些东东
            el.releaseCapture  ?  (
                 // 释放焦点
                el.releaseCapture(),
                 // 移除事件
                el.onmousemove  =  el.onmouseup  =   null
            ) : (
                 // 卸载事件
                $(document).unbind( " mousemove " , mouseMove).unbind( " mouseup " , mouseUp)
            )
        }
    }
< / script>

 

下载：实例原型

 

版权声明：
本文原创发布于 博客园，作者为 小吴同学，博客 http://wuxinxi007.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。