(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);