您好,欢迎访问一九零五行业门户网

jquery实现拖拽调整Div大小_jquery

今天写了一天这个jquery插件:
可以实现对div进行拖拽来调整大小的功能。
复制代码 代码如下:
(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             var target = this[i];
            $(target).on(mouseover mousemove, overhandler);
        }
        function outhandler() {
            for (var i = 0; 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.style.outline = 2px dashed #333;
                if ((0 > target.offsetleft + w - _startx || target.offsetleft + w - _startx > size) && 0                     resizew = false;
                    resizeh = true;
                    document.body.style.cursor = s-resize;
                }
                if (0 target.offsettop + h - _starty || target.offsettop + h - _starty > size)) {
                    resizew = true;
                    resizeh = false;
                    document.body.style.cursor = w-resize;
                }
                if (0                     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                 target.style.width = w + px;
                _startx = startx;
            }
            if (resizeh) {
                deltay = starty - _starty;
                h = $(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(div).dragdivresize();
记录一下今天的劳动成果,可能会有很多不成熟的地方,欢迎大家来指正,谢谢!
以上就是本文的全部内容了,希望大家能够喜欢。
其它类似信息

推荐信息