jquery原创实用插件之02 拖动随意改变框体宽高

效果图如下

代码如下：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
;(function($){
    $.extend($.fn,{
        resizable:function(options){
            var $d = $(document);
            var defaults = {
                el : null,
                min: { width: 0, height: 0 }, //限制允许拖动为最小宽高
                max: { width: $d.width(), height: $d.height()}, //限制允许拖动为最大宽高
                _move: function(){}, //拖动过程回调
                _stop: function(){} //拖动完成回调
            };
            var options  = $.extend(defaults,options);    
            this.each(function(){
                var self=this;
                var action={
                    el:null,
                    init:function(){
                        this.el = options.el?options.el:$(self);
                        this.el.bind('mousedown',{data:self},this.bindResize);
                    },
                    bindResize:function(e){
                        $('body').css({'-moz-user-select':'none','-o-user-select':'none','user-select':'none'});
                        var el = $(e.data.data);
                        var data = {
                            el: el,
                            width: el.width(),
                            height: el.height(),
                            min: options.min,
                            max: options.max,
                            left: e.pageX,
                            top: e.pageY
                        }
                        $d.bind('mousemove', { data: data }, action.resize).bind('mouseup', { data: data }, action.stopMove).bind('selectstart',action.disableSelect);
                    },
                    resize:function(e){
                        var d = e.data.data;
                        var width = e.pageX - d.left + d.width;
                        var height = e.pageY - d.top + d.height;
                        width = Math.min(Math.max(width, d.min.width), options.max.width);
                        height = Math.min(Math.max(height, d.min.height), options.max.height);
                        d.el.css({
                            width: width,
                            height: height
                         });
                        options._move(e);
                    },
                    stopMove:function(e){
                        var d = e.data.data;
                        $d.unbind('mousemove', action.resize).unbind('mouseup',action.stopMove).unbind('selectstart',action.disableSelect);
                        $('body').css({'-moz-user-select':'text','-o-user-select':'text','user-select':'text'});
                        options._stop(e);
                    },
                    disableSelect:function(){
                        return false;    
                    }
                };
                action.init();
            });
            return this;
        }
    });    
})(jQuery)

;(function($){
    //随意拖动修改大小调用
    $('.resize').resizable({
        el: $('.handler'), //拖动按钮
        min: { width: 300, height: 150 },//最小宽高
        max: { width: 500, height: 380 } //最大宽高
    });    
})(jQuery)

/* resize */
.resize{width: 500px; height: 380px; position:relative;background:#eee; border: 1px solid #999; padding:1px; float:left; margin:10px 0px; overflow:hidden;}
.resize h1{ height:30px; background:#ccc; line-height:30px; font-size:16px; font-weight:normal; padding-left:10px;}
.resizeContent{ padding:5px 10px;}
.handler{width: 15px; height: 15px; border-right: solid 1px #999; border-bottom: solid 1px #999; position: absolute; right: 1px; bottom: 1px; cursor: nw-resize;}

<div class="resize">
    <h1>测试标题</h1>
    <div class="resizeContent">
        作为一个辅助型英雄，辉煌光环是冰女的核心技能，全屏的的回魔能够为队友提供更强的续航能力，所以7级必须升满；而冰霜新星的减速和冰封禁锢能够帮助和支援队友的gank，关键时还能救命，所以前期都要升，不过由于冰封禁锢的控制时间会随等级上升，而冰霜新星的减速为固定的5秒，所以冰封禁锢要第二个升满；大招极寒领域的AOE伤害非常可观，可以用于清兵和团战，不过由于需要持续施法和冰女过于脆弱，因此作用不太明显，16级升满级可；前期黄点能够撑一些属性。
    </div>
    <div class="handler"></div>
</div>

<div class="clear"></div>