jquery implémente l'ajustement par glisser-déposer de Div size_jquery

J'ai écrit ce plug-in jquery toute la journée aujourd'hui :

Vous pouvez faire glisser et déposer des divs pour les redimensionner.

Copier le code Le code est le suivant :

(fonction ($) {
    $.fn.dragDivResize = fonction () {
        var deltaX, deltaY, _startX, _startY;
        var resizeW, resizeH;
        var taille = 20;
        var taillemin = 10;
        var scroll = getScrollOffsets();
        var _this = ceci;
        pour (var i = 0; i < _this.length; i ) {
            var cible = this[i];
            $(target).on("mouseover mousemove", overHandler);
        >
        fonction outHandler() {
            pour (var i = 0; i < _this.length; i ) {
                target.style.outline = "aucun";
            >
            document.body.style.cursor = "par défaut";
        >
        fonction overHandler (événement) {
            cible = événement.cible || 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 pointillé #333";
                if ((0 > target.offsetLeft w - _startX || target.offsetLeft w - _startX > taille) && 0 < target.offsetTop h - _startY && target.offsetTop h - _startY < size) {
                    resizeW = faux;
                    resizeH = vrai;
                    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 = vrai;
                    resizeH = faux;
                    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 = vrai;
                    resizeH = vrai;
                    document.body.style.cursor = "se-resize";
                >
                $(target).on('mousedown', downHandler);
            } autre {
                resizeW = faux;
                resizeH = faux;
                $(target).off('mousedown', downHandler);
            >
        >
        fonction downHandler (événement) {
            cible = événement.cible || 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);
            } sinon if (document.attachEvent) {
                target.setCapture();
                target.attachEvent("onlosecapeture", upHandler);
                target.attachEvent("onmouseup", upHandler);
                target.attachEvent("onmousemove", moveHandler);
            >
            if (event.stopPropagation) {
                event.stopPropagation();
            } autre {
                event.cancelBubble = true;
            >
            if (event.preventDefault) {
                event.preventDefault();
            } autre {
                event.returnValue = false;
            >
        >
        fonction moveHandler(e) {
            if (!e) e = window.event;
            var w, h;
            var startX = parseInt(e.clientX scroll.x);
            var startY = parseInt(e.clientY scroll.y);
            cible = cible || e.cible || e.srcElement;
            if (target == document.body) {
                revenir ;
            >
            si (resizeW) {
                deltaX = startX - _startX;
                w = $(target).width() deltaX < Taille min ? minSize : $(target).width() deltaX;
                target.style.width = w "px";
                _startX = startX;
            >
            si (resizeH) {
                deltaY = startY - _startY;
                h = $(target).height() deltaY < Taille min ? minSize : $(target).height() deltaY;
                target.style.height = h "px";
                _startY = startY;
            >
            if (e.stopPropagation) {
                e.stopPropagation();
            } autre {
                e.cancelBubble = true;
            >
        >
        fonction upHandler(e) {
            si (!e) {
                e = fenêtre.événement;
            >
            resizeW = faux;
            resizeH = faux;
            cible = e.cible || e.srcElement;
            $(target).on("mouseout", outHandler);
            if (document.removeEventListener) {
                document.removeEventListener("mousemove", moveHandler, true);
                document.removeEventListener("mouseup", upHandler, true);
            } sinon if (document.detachEvent) {
                target.detachEvent("onlosecapeture", upHandler);
                target.detachEvent("onmouseup", upHandler);
                target.detachEvent("onmousemove", moveHandler);
                target.releaseCapture();
            >
            if (e.stopPropagation) {
                e.stopPropagation();
            } autre {
                e.cancelBubble = true;
            >
        >
        fonction getScrollOffsets(w) {
            w = w || fenêtre;
            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();

Enregistrez les résultats du travail d'aujourd'hui. Il peut y avoir beaucoup de choses immatures. Merci de me corriger.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.