javascript - jQuery 覆盖包含选项，仅允许兄弟元素未使用的空间

Question

我想要一个自定义小部件，允许元素调整大小，其高度和宽度受其父元素限制。可调整大小的小部件上的包含选项允许这样做，但我需要一个额外的标准。我只需要允许在兄弟元素未使用的空间中调整元素的大小...如果您在元素 .xyz 上使用可调整大小的小部件，它将限制 .xyz 到父元素边界，但会将元素 .xyz 的兄弟元素推到父元素边界之外父元素边界!我怎样才能实现这个额外的标准？

如果您不明白我想要做什么，我可以更好地解释，请告诉我。

我之前曾经实现过这个工作，但我对实现它的方式并不满意。我在另一个论坛上发帖，但从未得到任何帮助。

http://www.webdeveloper.com/forum/showthread.php?274379-jQuery-UI-Resizable-Widget&p=1254637#post1254637

编辑:

我能够以比我发布到 webdevelper.com 的方式更好的方式来完成此操作。我将自定义 $.ui.plugin.add 方法附加到“可调整大小”小部件。现在我可以向可调整大小的小部件传递“ sibling :父级”选项，这允许我上面提到的标准。如果您知道更好的方法，请告诉我。我认为必须有一种更直接的方法来减少代码复制。我复制了整个收容方法并将其用作我的兄弟方法。

function num(v) {
     return parseInt(v, 10) || 0;
}


$.ui.plugin.add("resizable", "siblings", {

    start: function() {

        var element, p, co, ch, cw, width, height,
        that = $(this).data("ui-resizable"),
        o = that.options,
        el = that.element,
        oc = o.siblings,
        ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0)
 : oc;

    if (!ce) {
        return;
    }

    that.containerElement = $(ce);

    if (/document/.test(oc) || oc === document) {
        that.containerOffset = {
            left: 0, 
            top: 0
        };
        that.containerPosition = {
            left: 0, 
            top: 0
        };

        that.parentData = {
            element: $(document), 
            left: 0, 
            top: 0,
            width: $(document).width(), 
            height: $(document).height() || document.body.parentNode.scrollHeight
        };
    }

    // i'm a node, so compute top, left, right, bottom
    else {
        element = $(ce);
        p = [];
        //set the padding of the container element
        $([ "Top", "Right", "Left", "Bottom" ]).each(function(i, name) {
            p[i] = num(element.css("padding" + name));   
        });

        //collection of sibling elements
        var siblings = el.siblings();
        var sHeight = 0;

        siblings.each(function(){
            console.log($(this).height());
            var element = $("#" + this.id);
            var marginHeight = parseInt(element.css("margin-top")) +  
 parseInt(element.css("margin-bottom"));
            var borderHeight = parseInt(element.css("border-top-width")) + 
  parseInt(element.css("border-bottom-width")); 
            sHeight = sHeight + ($(this).height() + marginHeight + borderHeight);
        });

        that.containerOffset = element.offset();
        that.containerPosition = element.position();
        that.containerSize = {
            height: ((element.innerHeight() - p[3]) - sHeight), 
            width: (element.innerWidth() - p[1])
        };

        co = that.containerOffset;
        ch = that.containerSize.height;
        cw = that.containerSize.width;
        width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw );
        height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch);

        that.parentData = {
            element: ce, 
            left: co.left, 
            top: co.top, 
            width: width, 
            height: height
        };
    }
},

resize: function( event ) {

    console.log("resizing");

    var woset, hoset, isParent, isOffsetRelative,
    that = $(this).data("ui-resizable"),
    o = that.options,
    co = that.containerOffset, cp = that.position,
    pRatio = that._aspectRatio || event.shiftKey,
    cop = {
        top:0, 
        left:0
    }, ce = that.containerElement;

    if (ce[0] !== document && (/static/).test(ce.css("position"))) {
        cop = co;
    }

    if (cp.left < (that._helper ? co.left : 0)) {
        that.size.width = that.size.width + (that._helper ? (that.position.left - 
co.left) : (that.position.left - cop.left));
        if (pRatio) {
            that.size.height = that.size.width / that.aspectRatio;
        }
        that.position.left = o.helper ? co.left : 0;
    }

    if (cp.top < (that._helper ? co.top : 0)) {
        that.size.height = that.size.height + (that._helper ? (that.position.top - 
co.top) : that.position.top);
        if (pRatio) {
            that.size.width = that.size.height * that.aspectRatio;
        }
        that.position.top = that._helper ? co.top : 0;
    }

    that.offset.left = that.parentData.left+that.position.left;
    that.offset.top = that.parentData.top+that.position.top;

    woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left
     - cop.left)) + that.sizeDiff.width );
    hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - 
    co.top)) + that.sizeDiff.height );

    isParent = that.containerElement.get(0) === that.element.parent().get(0);
    isOffsetRelative = /relative|absolute/.test(that.containerElement.css("position"));

    if(isParent && isOffsetRelative) {
        woset -= that.parentData.left;
    }

    if (woset + that.size.width >= that.parentData.width) {
        that.size.width = that.parentData.width - woset;
        if (pRatio) {
            that.size.height = that.size.width / that.aspectRatio;
        }
    }

    if (hoset + that.size.height >= that.parentData.height) {
        that.size.height = that.parentData.height - hoset;
        if (pRatio) {
            that.size.width = that.size.height * that.aspectRatio;
        }
    }
},

stop: function(){
    var that = $(this).data("ui-resizable"),
    o = that.options,
    co = that.containerOffset,
    cop = that.containerPosition,
    ce = that.containerElement,
    helper = $(that.helper),
    ho = helper.offset(),
    w = helper.outerWidth() - that.sizeDiff.width,
    h = helper.outerHeight() - that.sizeDiff.height;

    if (that._helper && !o.animate && (/relative/).test(ce.css("position"))) {
        $(this).css({
            left: ho.left - cop.left - co.left, 
            width: w, 
            height: h
        });
    }

        if (that._helper && !o.animate && (/static/).test(ce.css("position"))) {
            $(this).css({
                left: ho.left - cop.left - co.left, 
                width: w, 
                height: h
            });
        }

    }
});


$(function(){

        $( "#resizable1").resizable({
            siblings: "parent"
        });

}); 

Answer 1

这是我的解决方案，我将同级功能包装在一个名为 staticblock 的新小部件中。我计划进一步扩展 staticblock 小部件，但按照现在的方式，它将意识到同级元素，从而在调整元素大小时不会将同级元素推到父级之外。

    function num(v) {
        return parseInt(v, 10) || 0;
    }


    $.widget("pf.staticblock", {

        _create: function() {
            var ele = this.element;

            this._makeResizable(ele);
        },

        _makeResizable: function(ele) {
            ele.resizable({
                siblings: "parent"
            });
        }

    });

    $.ui.plugin.add("resizable", "siblings", {

        start: function() {
            console.log("started");

            var element, p, co, ch, cw, width, height,
            that = $(this).data("ui-resizable"),
            o = that.options,
            el = that.element,
            oc = o.siblings,
            ce = (oc instanceof $) ? oc.get(0) : (/parent/.test(oc)) ? el.parent().get(0) : oc;

            if (!ce) {
                return;
            }

            that.containerElement = $(ce);

            if (/document/.test(oc) || oc === document) {
                that.containerOffset = {
                    left: 0, 
                    top: 0
                };
                that.containerPosition = {
                    left: 0, 
                    top: 0
                };

                that.parentData = {
                    element: $(document), 
                    left: 0, 
                    top: 0,
                    width: $(document).width(), 
                    height: $(document).height() || document.body.parentNode.scrollHeight
                };
            }

            // i'm a node, so compute top, left, right, bottom
            else {
                element = $(ce);
                p = [];
                //set the padding of the container element
                $([ "Top", "Right", "Left", "Bottom" ]).each(function(i, name) {
                    p[i] = num(element.css("padding" + name));   
                });

                //collection of sibling elements
                var siblings = el.siblings();
                var sHeight = 0;
                console.log(this.id);
                siblings.each(function(){
                    console.log($(this).height());
                    var element = $("#" + this.id);
                    var marginHeight = parseInt(element.css("margin-top")) + parseInt(element.css("margin-bottom"));
                    var borderHeight = parseInt(element.css("border-top-width")) + parseInt(element.css("border-bottom-width")); 
                    sHeight = sHeight + ($(this).height() + marginHeight + borderHeight);
                });

                that.containerOffset = element.offset();
                that.containerPosition = element.position();
                that.containerSize = {
                    height: ((element.innerHeight() - p[3]) - sHeight), 
                    width: (element.innerWidth() - p[1])
                };

                co = that.containerOffset;
                ch = that.containerSize.height;
                cw = that.containerSize.width;
                width = ($.ui.hasScroll(ce, "left") ? ce.scrollWidth : cw );
                height = ($.ui.hasScroll(ce) ? ce.scrollHeight : ch);

                that.parentData = {
                    element: ce, 
                    left: co.left, 
                    top: co.top, 
                    width: width, 
                    height: height
                };
            }
        },

        resize: function( event ) {

            console.log("resizing");

            var woset, hoset, isParent, isOffsetRelative,
            that = $(this).data("ui-resizable"),
            o = that.options,
            co = that.containerOffset, cp = that.position,
            pRatio = that._aspectRatio || event.shiftKey,
            cop = {
                top:0, 
                left:0
            }, ce = that.containerElement;

            if (ce[0] !== document && (/static/).test(ce.css("position"))) {
                cop = co;
            }

            if (cp.left < (that._helper ? co.left : 0)) {
                that.size.width = that.size.width + (that._helper ? (that.position.left - co.left) : (that.position.left - cop.left));
                if (pRatio) {
                    that.size.height = that.size.width / that.aspectRatio;
                }
                that.position.left = o.helper ? co.left : 0;
            }

            if (cp.top < (that._helper ? co.top : 0)) {
                that.size.height = that.size.height + (that._helper ? (that.position.top - co.top) : that.position.top);
                if (pRatio) {
                    that.size.width = that.size.height * that.aspectRatio;
                }
                that.position.top = that._helper ? co.top : 0;
            }

            that.offset.left = that.parentData.left+that.position.left;
            that.offset.top = that.parentData.top+that.position.top;

            woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left - cop.left)) + that.sizeDiff.width );
            hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height );

            isParent = that.containerElement.get(0) === that.element.parent().get(0);
            isOffsetRelative = /relative|absolute/.test(that.containerElement.css("position"));

            if(isParent && isOffsetRelative) {
                woset -= that.parentData.left;
            }

            if (woset + that.size.width >= that.parentData.width) {
                that.size.width = that.parentData.width - woset;
                if (pRatio) {
                    that.size.height = that.size.width / that.aspectRatio;
                }
            }

            if (hoset + that.size.height >= that.parentData.height) {
                that.size.height = that.parentData.height - hoset;
                if (pRatio) {
                    that.size.width = that.size.height * that.aspectRatio;
                }
            }
        },

        stop: function(){
            var that = $(this).data("ui-resizable"),
            o = that.options,
            co = that.containerOffset,
            cop = that.containerPosition,
            ce = that.containerElement,
            helper = $(that.helper),
            ho = helper.offset(),
            w = helper.outerWidth() - that.sizeDiff.width,
            h = helper.outerHeight() - that.sizeDiff.height;

            if (that._helper && !o.animate && (/relative/).test(ce.css("position"))) {
                $(this).css({
                    left: ho.left - cop.left - co.left, 
                    width: w, 
                    height: h
                });
            }

            if (that._helper && !o.animate && (/static/).test(ce.css("position"))) {
                $(this).css({
                    left: ho.left - cop.left - co.left, 
                    width: w, 
                    height: h
                });
            }

        }
    });


    $(function(){

            $( "#resizable1").staticblock({});
            $( "#resizable2").staticblock({});
            $( "#resizable3").staticblock({});
            $( "#resizable4").staticblock({});

    });

CSS:

#parent { width:600px; height: 600px; background: blue;}    

#resizable1 { width: 130px; height: 131px; padding: 0em; background: yellow; }
#resizable1 h3 { text-align: center; margin: 0; }

#resizable2 { width: 85px; height: 50px; padding: 0em; background: yellow; }
#resizable2 h3 { text-align: center; margin: 0; }

#resizable3 { width: 41px; height: 70px; padding: 0em; background: yellow; }
#resizable3 h3 { text-align: center; margin: 0; }

#resizable4 { width: 11px; height: 99px; padding: 0em; background: yellow; }
#resizable4 h3 { text-align: center; margin: 0; }

HTML:

<div id="parent">
    <div id="resizable1" class="ui-widget-content">
       test
    </div>
    <div id="resizable2" class="ui-widget-content">
       test
    </div>
    <div id="resizable3" class="ui-widget-content">
       test
    </div>
    <div id="resizable4" class="ui-widget-content">
       test
    </div>
</div>