首页 > 安全资讯 >

JQ插件DIV移动,改变大小

16-12-10

JQ插件DIV移动,改变大小。

(function ($) {
    $.fn.DivMoveResize = function () {
        var target = this;
        var ismove = false;
        var mouseType = 0;
        var startPoint = { x: 0, y: 0 };
        target.css("position", "absolute");
        target.parent().css("position", "relative");
        target.on("mousedown", mouseDown);
        target.on("mousemove", mouseMove);
        target.on("mouseup", mouseUp);
        target.on("dargstart", dargEvent);
        target.parent().on("mousemove", pmouseMove);
        target.parent().on("mouseup", mouseUp);
        function mouseDown(event) {
            $(this).css("z-index", "10");
            startPoint.x = event.pageX;
            startPoint.y = event.pageY;
            mouseType = mousePositionArea({ x: event.offsetX, y: event.offsetY });
            //如果不是改变尺寸时移动
            if (mouseType == 0)
                ismove = true;
        }


        //鼠标在父类中移动
        function pmouseMove(event) {
            //改变大小
            if (mouseType != 0) {
                var offset = { x: event.pageX - startPoint.x, y: event.pageY - startPoint.y };
                startPoint.x = event.pageX;
                startPoint.y = event.pageY;
                switch (mouseType) {
                    case 1:
                        var top = target[0].offsetTop + offset.y;
                        var left = target[0].offsetLeft + offset.x;
                        target.css({ "top": top + "px", "left": left, "height": target.height() - offset.y, "width": target.width() - offset.x });
                        break;
                    case 2:
                        var top = target[0].offsetTop + offset.y;
                        target.css({ "top": top + "px", "height": target.height() - offset.y });
                        break;
                    case 3:
                        var top = target[0].offsetTop + offset.y;
                        target.css({ "top": top + "px", "height": target.height() - offset.y, "width": target.width() + offset.x });
                        break;
                    case 4:
                        var left = target[0].offsetLeft + offset.x;
                        target.css({ "left": left + "px", "width": target.width() - offset.x });
                        break;
                    case 5:
                        target.width(target.width() + offset.x);
                        break;
                    case 6:
                        var left = target[0].offsetLeft + offset.x;
                        target.css({ "left": left, "height": target.height() + offset.y, "width": target.width() - offset.x });
                        break;
                    case 7:
                        target.height(target.height() + offset.y);
                        break;
                    case 8:
                        target.css({ "height": target.height() + offset.y, "width": target.width() + offset.x });
                        break;
                    default:
                        $(this).css("cursor", "default");
                        break;
                }
                //FileUpload.setRectFlag(target[0], { x: target[0].offsetLeft, y: target[0].offsetTop, width: $(this).width(), height: $(this).height() });
            }
        }
        function mouseMove(event) {
            //改变鼠标状态
            var mtype = mousePositionArea({ x: event.offsetX, y: event.offsetY });
            switch (mtype) {
                case 1:
                case 8:
                    $(this).css("cursor", "nwse-resize");
                    break;
                case 2:
                case 7:
                    $(this).css("cursor", "n-resize");
                    break;
                case 3:
                case 6:
                    $(this).css("cursor", "nesw-resize");
                    break;
                case 4:
                case 5:
                    $(this).css("cursor", "w-resize");
                    break;
                default:
                    $(this).css("cursor", "default");
                    break;
            }
            //移动区域
            if (ismove) {
                var offset = { x: event.pageX - startPoint.x, y: event.pageY - startPoint.y };
                var left = target[0].offsetLeft + offset.x;
                var top = target[0].offsetTop + offset.y;
                target.css({ "left": left + "px", "top": top + "px" });
                //FileUpload.setRectFlag(this, { x: left, y: top, width: target.width(), height: target.height() });
                startPoint.x = event.pageX;
                startPoint.y = event.pageY;
            }
        }
        function mouseUp(event) {
            $(this).css("z-index", "0");
            ismove = false;
            mouseType = 0;
        }
        function dargEvent(event) {
            return false;
        }
        //确定鼠标区域
        function mousePositionArea(point) {
            var magin = 6;
            var span = -2;
            var width = target.width() - 1;
            var height = target.height() - 1;
            var wx = target.width() - magin;
            var hy = target.height() - magin;
            var rst = 0;
            if (point.x > span && point.x < magin && point.y > span && point.y < magin)//左上方区域
                rst = 1;
            else if (point.x > magin && point.x < wx && point.y < magin && point.y > span)//上方区域
                rst = 2;
            else if (point.x > wx && point.y < magin && point.x < width && point.y > span)//右上方区域
                rst = 3;
            else if (point.x < magin && point.y > magin && point.y < hy && point.x > span)//左方区域
                rst = 4;
            else if (point.x > wx && point.y > magin && point.y < hy && point.x < width)//右方区域
                rst = 5;
            else if (point.y > hy && point.x < magin && point.x > span && point.y < height) //左下方区域
                rst = 6;
            else if (point.y > hy && point.x > magin && point.x < wx && point.y < height)//下方区域
                rst = 7;
            else if (point.y > hy && point.x > wx && point.x < width && point.y < height)//右下方区域
                rst = 8;
            return rst;
        }
    }
}(jQuery))
相关文章
最新文章
热点推荐