jquery插件之拖拽改变元素大小

该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

此插件旨在实现目前较为流行的拖拽改变元素大小的效果，您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高。整体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.box{position:absolute;left:100px;top:100px;border:1px solid #eee;width:150px;height:150px;padding:10px;cursor:move;}
.drag{position:absolute;bottom:3px;right:3px;display:block;width:7px;height:7px;background:url(scale.png) no-repeat}
</style>
<script type="text/javascript" src="../test/jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.resizable.js"></script>
</head>

<body>
<div class="box">拖拽我吧！<span class="drag"></span></div>
<script>
$(function(){
    $(".drag").resizable({
        minW : 150,
        minH : 150,
        maxW : 500,
        maxH : 500,
        });
    })
</script>
</body>
</html>

插件 jquery.dragscale.js 代码：

/*
*resizable 0.1
*Copyright (c) 2015 小坏 http://tnnyang.cnblogs.com
*Dependenc jquery-1.7.1.js
*/
;(function(a){
    a.fn.resizable = function(options){
        var defaults = {   //默认参数
            minW : 150,
            minH : 150,
            maxW : 500,
            maxH : 500,
            }
        var opts = a.extend(defaults, options);
        
        this.each(function(){
            var obj = a(this);    
            obj.mousedown(function(e){    
                var e = e || event;    //区分IE和其他浏览器事件对象
                var x = e.pageX - obj.position().left;    //获取鼠标距离匹配元素的父元素左侧的距离                        
                var y = e.pageY - obj.position().top;     //获取鼠标距离匹配元素的父元素顶端的距离
                
                $(document).mousemove(function(e){
                    var e = e || event;
                    var _x = e.pageX - x;        //动态获取匹配元素距离其父元素左侧的宽度
                    var _y = e.pageY - y;
                    _x = _x < opts.minW ? opts.minW : _x;      //保证匹配元素的最小宽度为150px
                    _x = _x > opts.maxW ? opts.maxW : _x;    //保证匹配元素的最大宽度为500px
                    _y = _y < opts.minH ? opts.minH : _y;
                    _y = _y > opts.maxH ? opts.maxH : _y;      
                    obj.parent().css({width:_x,height:_y});
                }).mouseup(function(){
                    $(this).unbind("mousemove");  //当鼠标抬起  删除移动事件   匹配元素宽高变化停止
                    });
                });
            
            })
        }
    })(jQuery);

点击下载拖拽改变元素大小的DEMO

 

posted @ 2015-09-10 17:06  豫见世家公子  阅读(604)  评论(0)  编辑  收藏  举报