jqueryはDiv size_jqueryのドラッグアンドドロップ調整を実装します

今日は一日中この jquery プラグインを書きました:

div をドラッグ アンド ドロップしてサイズを変更できます。

コードをコピー コードは次のとおりです:

(関数 ($) {
    $.fn.dragDivResize = function () {
        var deltaX、deltaY、_startX、_startY;
        varsizeW、resizeH;
        var サイズ = 20;
        var minSize = 10;
        var スクロール = getScrollOffsets();
        var _this = this;
        for (var i = 0; i <_this.length i>             var target = this[i];
            $(target).on("mouseovermousemove", overHandler);
        }
        function outHandler() {
            for (var i = 0; i <_this.length i>                 target.style.outline = "なし";
            }
            document.body.style.cursor = "デフォルト";
        }
        関数 overHandler(event) {
            ターゲット = イベント.ターゲット ||イベント.srcElement;
            var startX =event.clientXscroll.x;
            var startY =event.clientYscroll.y;
            var w = $(ターゲット).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 破線 #333";
                if ((0 > target.offsetLeft w - _startX || target.offsetLeft w - _startX > size) && 0 < target.offsetTop h - _startY && target.offsetTop h - _startY < size) {
                    sizeW = false;
                    sizeH = 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)) {
                    sizeW = true;
                    sizeH = 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) {
                    sizeW = true;
                    sizeH = true;
                    document.body.style.cursor = "se-resize";
                }
                $(target).on('mousedown', downHandler);
            } else {
                sizeW = false;
                sizeH = false;
                $(target).off('mousedown', downHandler);
            }
        }
        関数 downHandler(event) {
            ターゲット = イベント.ターゲット ||イベント.srcElement;
            var startX =event.clientXscroll.x;
            var startY =event.clientYscroll.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) {
                イベント.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
            if (event.preventDefault) {
                イベント.preventDefault();
            } else {
                イベント.returnValue = false;
            }
        }
        function moveHandler(e) {
            if (!e) e = window.event;
            var w, h;
            var startX = parseInt(e.clientXscroll.x);
            var startY = parseInt(e.clientYscroll.y);
            ターゲット = ターゲット || e.ターゲット || e.srcElement;
            if (ターゲット == document.body) {
                戻る;
            }
            if (resizeW) {
                deltaX = startX - _startX;
                w = $(ターゲット).width() deltaX                 target.style.width = w "px";
                _startX = startX;
            }
            if (resizeH) {
                deltaY = startY - _startY;
                h = $(ターゲット).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;
            }
            sizeW = false;
            sizeH = false;
            ターゲット = 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 ||ウィンドウ;
            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();

今日の作業の結果を記録します。未熟な点が多いかもしれませんが、よろしくお願いします。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。