jquery melaksanakan pelarasan seret dan lepas Div size_jquery

Saya menulis pemalam jquery ini sepanjang hari hari ini:

Anda boleh seret dan lepas div untuk mengubah saiznya.

Salin kod Kod adalah seperti berikut:

(fungsi ($) {
    $.fn.dragDivResize = fungsi () {
        var deltaX, deltaY, _startX, _startY;
        var resizeW, resizeH;
        saiz var = 20;
        var minSize = 10;
        var scroll = getScrollOffsets();
        var _ini = ini;
        untuk (var i = 0; i < _this.length; i ) {
            var sasaran = ini[i];
            $(target).on("mouseover mousemove", overHandler);
        }
        function outHandler() {
            untuk (var i = 0; i < _this.length; i ) {
                target.style.outline = "tiada";
            }
            document.body.style.cursor = "lalai";
        }
        fungsi overHandler(acara) {
            sasaran = acara.sasaran || acara.srcElement;
            var startX = event.clientX scroll.x;
            var startY = event.clientY scroll.y;
            var w = $(sasaran).lebar();
            var h = $(sasaran).height();
            _startX = parseInt(startX);
            _startY = parseInt(startY);
            jika ((0 < target.offsetLeft w - _startX && target.offsetLeft w - _startX < saiz) || (0 < target.offsetTop h - _startY && target.offsetTop h - _startY < saiz)) {
                target.style.outline = "2px putus-putus #333";
                jika ((0 > target.offsetLeft w - _startX || target.offsetLeft w - _startX > saiz) && 0 < target.offsetTop h - _startY && target.offsetTop h - _startY < saiz) {
                    ubah saizW = palsu;
                    ubah saizH = benar;
                    document.body.style.cursor = "s-resize";
                }
                jika (0 < target.offsetLeft w - _startX && target.offsetLeft w - _startX < saiz && (0 > target.offsetTop h - _startY || target.offsetTop h - _startY > saiz)) {
                    ubah saizW = benar;
                    ubah saizH = palsu;
                    document.body.style.cursor = "w-resize";
                }
                jika (0 < target.offsetLeft w - _startX && target.offsetLeft w - _startX < saiz && 0 < target.offsetTop h - _startY && target.offsetTop h - _startY < saiz) {
                    ubah saizW = benar;
                    ubah saizH = benar;
                    document.body.style.cursor = "se-resize";
                }
                $(target).on('mousedown', downHandler);
            } lain {
                ubah saizW = palsu;
                ubah saizH = palsu;
                $(target).off('mousedown', downHandler);
            }
        }
        fungsi downHandler(acara) {
            sasaran = acara.sasaran || acara.srcElement;
            var startX = event.clientX scroll.x;
            var startY = event.clientY scroll.y;
            _startX = parseInt(startX);
            _startY = parseInt(startY);
            jika (document.addEventListener) {
                document.addEventListener("mousemove", moveHandler, true);
                document.addEventListener("mouseup", upHandler, true);
            } lain jika (document.attachEvent) {
                target.setCapture();
                target.attachEvent("onlosecapeture", upHandler);
                target.attachEvent("onmouseup", upHandler);
                target.attachEvent("onmousemove", moveHandler);
            }
            jika (event.stopPropagation) {
                event.stopPropagation();
            } lain {
                event.cancelBubble = benar;
            }
            jika (event.preventDefault) {
                event.preventDefault();
            } lain {
                event.returnValue = palsu;
            }
        }
        function moveHandler(e) {
            jika (!e) e = window.event;
            var w, h;
            var startX = parseInt(e.clientX scroll.x);
            var startY = parseInt(e.clientY scroll.y);
            sasaran = sasaran || e.sasaran || e.srcElement;
            jika (sasaran == document.body) {
                kembali;
            }
            jika (ubah saizW) {
                deltaX = startX - _startX;
                w = $(sasaran).lebar() deltaX < minSize ? minSize : $(target).width() deltaX;
                target.style.width = w "px";
                _startX = startX;
            }
            jika (saiz semulaH) {
                deltaY = startY - _startY;
                h = $(sasaran).height() deltaY < minSize ? minSize : $(sasaran).height() deltaY;
                target.style.height = h "px";
                _startY = startY;
            }
            jika (e.stopPropagation) {
                e.stopPropagation();
            } lain {
                e.cancelBubble = benar;
            }
        }
        fungsi upHandler(e) {
            jika (!e) {
                e = window.event;
            }
            ubah saizW = palsu;
            ubah saizH = palsu;
            sasaran = e.sasaran || e.srcElement;
            $(target).on("mouseout", outHandler);
            jika (document.removeEventListener) {
                document.removeEventListener("mousemove", moveHandler, true);
                document.removeEventListener("mouseup", upHandler, true);
            } lain jika (document.detachEvent) {
                target.detachEvent("onlosecapeture", upHandler);
                target.detachEvent("onmouseup", upHandler);
                target.detachEvent("onmousemove", moveHandler);
                target.releaseCapture();
            }
            jika (e.stopPropagation) {
                e.stopPropagation();
            } lain {
                e.cancelBubble = benar;
            }
        }
        fungsi getScrollOffsets(w) {
            w = w || tingkap;
            jika (w.pageXOffset != null) {
                pulangkan { x: w.pageXOffset, y: w.pageYOffset };
            }
            var d = w.dokumen;
            if (document.compatMode == "CSS1Compat") {
                      kembali { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
            }
                 kembali { x: d.body.scrollKiri, y: d.body.scrollTop };
}
}
}(jQuery));
jQuery("div").dragDivResize();

Catat hasil kerja hari ini Mungkin ada banyak perkara yang tidak matang Anda dialu-alukan untuk membetulkan saya.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.