jquery는 Div size_jquery의 드래그 앤 드롭 조정을 구현합니다.

오늘 하루 종일 이 jquery 플러그인을 작성했습니다.

div를 끌어서 놓아 크기를 조정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

(함수($) {
    $.fn.dragDivResize = 함수() {
        var deltaX, deltaY, _startX, _startY;
        var resizeW, resizeH;
        변수 크기 = 20;
        var minSize = 10;
        var 스크롤 = getScrollOffsets();
        var _this = this;
        for (var i = 0; i < _this.length; i ) {
            var 대상 = this[i];
            $(target).on("mouseover mousemove", overHandler);
        }
        함수 outHandler() {
            for (var i = 0; i < _this.length; i ) {
                target.style.outline = "없음";
            }
            document.body.style.cursor = "기본값";
        }
        함수 overHandler(이벤트) {
            대상 = event.target || event.srcElement;
            var startX = event.clientX 스크롤.x;
            var startY = event.clientY 스크롤.y;
            var w = $(target).width();
            var h = $(target).height();
            _startX = parsInt(startX);
            _startY = parsInt(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 점선 #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-크기 조정";
                }
                if (0 < target.offsetLeft w - _startX && target.offsetLeft w - _startX < 크기 && 0 < target.offsetTop h - _startY && target.offsetTop h - _startY < 크기) {
                    resizeW = true;
                    resizeH = true;
                    document.body.style.cursor = "se-resize";
                }
                $(target).on('mousedown', downHandler);
            } 그 밖의 {
                resizeW = false;
                resizeH = false;
                $(target).off('mousedown', downHandler);
            }
        }
        함수 downHandler(이벤트) {
            대상 = event.target || event.srcElement;
            var startX = event.clientX 스크롤.x;
            var startY = event.clientY 스크롤.y;
            _startX = parsInt(startX);
            _startY = parsInt(startY);
            if (document.addEventListener) {
                document.addEventListener("mousemove", moveHandler, true);
                document.addEventListener("mouseup", upHandler, true);
            } else if (document.attachEvent) {
                target.setCapture();
                target.attachEvent("onlosecapture", upHandler);
                target.attachEvent("onmouseup", upHandler);
                target.attachEvent("onmousemove", moveHandler);
            }
            if (event.stopPropagation) {
                event.stopPropagation();
            } 그 밖의 {
                event.cancelBubble = true;
            }
            if (event.preventDefault) {
                event.preventDefault();
            } 그 밖의 {
                event.returnValue = false;
            }
        }
        함수 moveHandler(e) {
            if (!e) e = window.event;
            var w, h;
            var startX =parseInt(e.clientX scroll.x);
            var startY =parseInt(e.clientY scroll.y);
            목표 = 목표 || e.타겟 || e.srcElement;
            if (대상 == document.body) {
                반품;
            }
            if (크기 조정W) {
                deltaX = startX - _startX;
                w = $(target).width() deltaX < 최소 크기? minSize : $(target).width() deltaX;
                target.style.width = w "px";
                _startX = startX;
            }
            if (크기 조정) {
                deltaY = startY - _startY;
                h = $(target).height() deltaY < 최소 크기? minSize : $(target).height() deltaY;
                target.style.height = h "px";
                _startY = 시작Y;
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            } 그 밖의 {
                e.cancelBubble = true;
            }
        }
        함수 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("onlosecapture", upHandler);
                target.detachEvent("onmouseup", upHandler);
                target.detachEvent("onmousemove", moveHandler);
                target.releaseCapture();
            }
            if (e.stopPropagation) {
                e.stopPropagation();
            } 그 밖의 {
                e.cancelBubble = true;
            }
        }
        함수 getScrollOffsets(w) {
            w = w || 창문;
            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();

오늘 작업한 결과를 기록해 보니까 미숙한 부분이 많을 수 있으니 수정해주시면 감사하겠습니다!

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.