resizable.js

Posted 2020-08-19

(function($){
    var boundbar=
    {
        html:"<div class=\\"boundbar\\" style=\\"overflow: hidden; position: absolute;background-color:#09C;\\"></div>",
        style:"overflow: hidden; position: absolute;background-color:#09C;",
        selector:".boundbar:first",
        thick:10,
        cursor:‘pointer‘,
        width:0,
        height:0,
        offset:null,
        resize:false,
        boundbar:null,
        mousePositionX:0,
        mousePositionY:0,
        mouseMoveToTopBound:false,
        mouseMoveToBottomBound:false,
        mouseMoveToLeftBound:false,
        mouseMoveToRightBound:false,
    };
    var target={
        context:null,
        width:0,
        height:0,
        offset:null,
        resize:false,
        pageX:0,
        pageY:0,
        boundbar:null,
        mousePositionX:0,
        mousePositionY:0,
        mouseMoveToTopBound:false,
        mouseMoveToBottomBound:false,
        mouseMoveToLeftBound:false,
        mouseMoveToRightBound:false,
    }
    $.fn.extend({
        "xhresizable":function(){
            $(document).mousemove(function(e) {
                target.mousePositionX=e.pageX;
                target.mousePositionY=e.pageY;
                $("#log").html("");
                $("#log").append("position-x:"+target.mousePositionX+"</br>");
                $("#log").append("position-y:"+target.mousePositionY+"</br>");
                $("#log").append("width:"+target.width+"</br>");
                $("#log").append("height:"+target.height+"</br>");
                $("#log").append("target.pageX:"+target.pageX+"</br>");
                $("#log").append("target.pageY:"+target.pageY+"</br>");
                if(target.resize){
                    var top=target.context.offset.top;
                    var left=target.context.offset.left;
                    var width=e.pageX- target.offset.left;
                    var height=e.pageY- target.offset.top;
                    if(target.mouseMoveToBottomBound&target.mouseMoveToRightBound){
                        //右下
                        $(target.context).css({
                            "width":width,
                            "height":height,
                        });
                    }
                    else if(target.mouseMoveToBottomBound){
                        //下
                        $(target.context).css({
                            "width":target.width,
                            "height":height,
                        });
                    }
                    else if(target.mouseMoveToRightBound){
                        //右
                        $(target.context).css({
                            "width":width,
                            "height":target.height,
                        });
                    }
                    else{    
                        $(target.context).css({
                            "width":width,
                            "height":height,
                        });
                    }
                }
            });
            $(document).mouseup(function(e) {
                if(target.resize){
                    target.resize=false;
                    $("body").append("拖拽拉伸结束</br>");
                } 
            });
            //鼠标进入目标区域，添加区域边界
            $(this).mouseenter(function(e){
                if($(this).children(boundbar.selector).length==0){
                    $(this).append(boundbar.html);
                    $(this).children(boundbar.selector).attr("style",boundbar.style);
                    $(this).children(boundbar.selector).mousedown(function(e){
                        target.resize=true;
                    });
                    $(this).children(boundbar.selector).mouseup(function(e){
                        target.resize=false;
                    });
                }
            });
            //鼠标离开目标区域，移除区域边界
            $(this).mouseleave(function(e){
                $(this).children(boundbar.selector).remove();                    
            });
            $(this).mousemove (function(e){
                target.context=$(this);
                target.width=$(this).width();
                target.height=$(this).height();
                target.offset = $(this).offset();
                target.pageX=e.pageX,
                target.pageY=e.pageY,
                target.mousePositionX=e.pageX-target.offset.left;
                target.mousePositionY=e.pageY-target.offset.top;
                target.mouseMoveToTopBound=target.mousePositionY-boundbar.thick<0?true:false;
                target.mouseMoveToBottomBound=target.mousePositionY+boundbar.thick>target.height?true:false;
                target.mouseMoveToLeftBound=target.mousePositionX-boundbar.thick<0?true:false;
                target.mouseMoveToRightBound=target.mousePositionX+boundbar.thick>target.width?true:false;
                $("#log").html("");
                $("#log").append("position-x:"+target.mousePositionX+"</br>");
                $("#log").append("position-y:"+target.mousePositionY+"</br>");
                $("#log").append("width:"+target.width+"</br>");
                $("#log").append("height:"+target.height+"</br>");
                $("#log").append("target.pageX:"+target.pageX+"</br>");
                $("#log").append("target.pageY:"+target.pageY+"</br>");
                //如果未检测到区域边界，激活目标mouseenter事件（自动添加区域边界及相关事件）
                if($(this).children(boundbar.selector).length==0){
                    $(this).mouseenter();
                }
                if(target.mouseMoveToBottomBound&target.mouseMoveToRightBound){
                    //右下
                    $(boundbar.selector).removeAttr("style").attr("style",boundbar.style).css({
                        "cursor":"nw-resize",
                        "right":0,
                        "bottom":0,
                        "width":boundbar.thick,
                        "height":boundbar.thick,
                    });
                }
                else if(target.mouseMoveToBottomBound){
                    //下
                    $(boundbar.selector).removeAttr("style").attr("style",boundbar.style).css({
                        "cursor":"n-resize",
                        "bottom":0,
                        "left":0,
                        "width":"100%",
                        "height":boundbar.thick,
                    });
                }
                else if(target.mouseMoveToRightBound){
                    //右
                    $(boundbar.selector).removeAttr("style").attr("style",boundbar.style).css({
                        "cursor":"e-resize",
                        "top":0,
                        "right":0,
                        "width":boundbar.thick,
                        "height":target.height,
                    });
                }
                else{                    
                    $(boundbar.selector).removeAttr("style");
                }
            });
            $(this).mousedown(function(e){
                target.resize=true;
                target.mousePositionX=e.pageX-target.offset.left;
                target.mousePositionY=e.pageY-target.offset.top;
            });
            $(this).mouseup(function(e){
                target.resize=false;
            });
        }
    });
})(jQuery);

View Code