Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert die Drag-and-Drop-Anpassung von Div size_jquery

jquery implementiert die Drag-and-Drop-Anpassung von Div size_jquery

WBOY
WBOYOriginal
2016-05-16 16:16:581135Durchsuche

Ich habe heute den ganzen Tag dieses JQuery-Plug-in geschrieben:

Sie können Divs per Drag-and-Drop verschieben, um ihre Größe zu ändern.

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {
    $.fn.dragDivResize = function () {
        var deltaX, deltaY, _startX, _startY;
        var resizeW, resizeH;
        Var-Größe = 20;
        var minSize = 10;
        var scroll = getScrollOffsets();
        var _this = this;
        for (var i = 0; i < _this.length; i ) {
            var target = this[i];
            $(target).on("mouseover mousemove", overHandler);
        }
        Funktion outHandler() {
            for (var i = 0; i < _this.length; i ) {
                target.style.outline = "none";
            }
            document.body.style.cursor = "default";
        }
        Funktion 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 gestrichelt #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);
            } sonst {
                resizeW = false;
                resizeH = false;
                $(target).off('mousedown', downHandler);
            }
        }
        Funktion 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();
            } sonst {
                event.cancelBubble = true;
            }
            if (event.preventDefault) {
                event.preventDefault();
            } sonst {
                event.returnValue = false;
            }
        }
        Funktion moveHandler(e) {
            if (!e) e = window.event;
            var w, h;
            var startX = parseInt(e.clientX scroll.x);
            var startY = parseInt(e.clientY scroll.y);
            Ziel = Ziel || e.target || e.srcElement;
            if (target == document.body) {
                zurück;
            }
            if (resizeW) {
                deltaX = startX - _startX;
                w = $(target).width() deltaX < Mindestgröße? minSize : $(target).width() deltaX;
                target.style.width = w "px";
                _startX = startX;
            }
            if (resizeH) {
                deltaY = startY - _startY;
                h = $(target).height() deltaY < Mindestgröße? minSize : $(target).height() deltaY;
                target.style.height = h "px";
                _startY = startY;
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            } sonst {
                e.cancelBubble = true;
            }
        }
        Funktion 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();
            } sonst {
                e.cancelBubble = true;
            }
        }
        Funktion getScrollOffsets(w) {
            w = w || Fenster;
            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();

Notieren Sie die Ergebnisse der heutigen Wehen. Es kann sein, dass Sie mich korrigieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn