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))
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值