欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现拖拽调整Div大小

程序员文章站 2023-11-02 23:05:22
今天写了一天这个jquery插件:可以实现对p进行拖拽来调整大小的功能。 代码如下: (function ($) {     $.fn.d...

今天写了一天这个jquery插件:可以实现对p进行拖拽来调整大小的功能。

代码如下:


(function ($) {
    $.fn.dragdivresize = function () {
        var deltax, deltay, _startx, _starty;
        var resizew, resizeh;
        var size = 20;
        var minsize = 10;
        var scroll = getscrolloffsets();
        var _this = this;
        for (var i = 0; i < _this.length; i++) {
            var target = this[i];
            $(target).on("mouver mousemove", overhandler);
        }
        function outhandler() {
            for (var i = 0; i < _this.length; i++) {
                target.style.outline = "none";
            }
            document.body.style.cursor = "default";
        }
        function overhandler(event) {
            target = event.target || event.srcelement;
            var startx = event.clientx + scroll.x;
            var starty = event.clienty + scroll.y;
            var w = $(target).width();
            var h = $(target).height();
            _startx = parseint(startx);
            _starty = parseint(starty);
            if ((0 < target.offsetleft + w - _startx && target.offsetleft + w - _startx < size) || (0 < target.offsettop + h - _starty && target.offsettop + h - _starty < size)) {
                target.style.outline = "2px dashed #333";
                if ((0 > target.offsetleft + w - _startx || target.offsetleft + w - _startx > size) && 0 < target.offsettop + h - _starty && target.offsettop + h - _starty < size) {
                    resizew = false;
                    resizeh = true;
                    document.body.style.cursor = "s-resize";
                }
                if (0 < target.offsetleft + w - _startx && target.offsetleft + w - _startx < size && (0 > target.offsettop + h - _starty || target.offsettop + h - _starty > size)) {
                    resizew = true;
                    resizeh = false;
                    document.body.style.cursor = "w-resize";
                }
                if (0 < target.offsetleft + w - _startx && target.offsetleft + w - _startx < size && 0 < target.offsettop + h - _starty && target.offsettop + h - _starty < size) {
                    resizew = true;
                    resizeh = true;
                    document.body.style.cursor = "se-resize";
                }
                $(target).on('mousedown', downhandler);
            } else {
                resizew = false;
                resizeh = false;
                $(target).off('mousedown', downhandler);
            }
        }
        function downhandler(event) {
            target = event.target || event.srcelement;
            var startx = event.clientx + scroll.x;
            var starty = event.clienty + scroll.y;
            _startx = parseint(startx);
            _starty = parseint(starty);
            if (document.addeventlistener) {
                document.addeventlistener("mousemove", movehandler, true);
                document.addeventlistener("mouseup", uphandler, true);
            } else if (document.attachevent) {
                target.setcapture();
                target.attachevent("onlosecapeture", uphandler);
                target.attachevent("onmouseup", uphandler);
                target.attachevent("onmousemove", movehandler);
            }
            if (event.stoppropagation) {
                event.stoppropagation();
            } else {
                event.cancelbubble = true;
            }
            if (event.preventdefault) {
                event.preventdefault();
            } else {
                event.returnvalue = false;
            }
        }
        function movehandler(e) {
            if (!e) e = window.event;
            var w, h;
            var startx = parseint(e.clientx + scroll.x);
            var starty = parseint(e.clienty + scroll.y);
            target = target || e.target || e.srcelement;
            if (target == document.body) {
                return;
            }
            if (resizew) {
                deltax = startx - _startx;
                w = $(target).width() + deltax < minsize ? minsize : $(target).width() + deltax;
                target.style.width = w + "px";
                _startx = startx;
            }
            if (resizeh) {
                deltay = starty - _starty;
                h = $(target).height() + deltay < minsize ? minsize : $(target).height() + deltay;
                target.style.height = h + "px";
                _starty = starty;
            }
            if (e.stoppropagation) {
                e.stoppropagation();
            } else {
                e.cancelbubble = true;
            }
        }
        function uphandler(e) {
            if (!e) {
                e = window.event;
            }
            resizew = false;
            resizeh = false;
            target = e.target || e.srcelement;
            $(target).on("mouseout", outhandler);
            if (document.removeeventlistener) {
                document.removeeventlistener("mousemove", movehandler, true);
                document.removeeventlistener("mouseup", uphandler, true);
            } else if (document.detachevent) {
                target.detachevent("onlosecapeture", uphandler);
                target.detachevent("onmouseup", uphandler);
                target.detachevent("onmousemove", movehandler);
                target.releasecapture();
            }
            if (e.stoppropagation) {
                e.stoppropagation();
            } else {
                e.cancelbubble = true;
            }
        }
        function getscrolloffsets(w) {
            w = w || window;
            if (w.pagexoffset != null) {
                return { x: w.pagexoffset, y: w.pageyoffset };
            }
            var d = w.document;
            if (document.compatmode == "css1compat") {
                return { x: d.documentelement.scrollleft, y: d.documentelement.scrolltop };
            }
            return { x: d.body.scrollleft, y: d.body.scrolltop };
        }
    }
}(jquery));
jquery("p").dragdivresize();