[分享] 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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。