Question

我使用jQuery UI嵌套了resizable。

<div id="outer">
  <div id="inner"></div>
</div>

$("#outer").resizable();
$("#inner").resizable();

我想破坏外部可调整大小，但不是内部。不幸地这样做......

$("#outer").resizable("destroy");

...也打破了内部可调整大小。目前我唯一可以解决这个问题的方法是首先摧毁孩子，然后摧毁父母，然后重新初始化孩子。

$("#inner").resizable("destroy");
$("outer").resizable("destroy");
$("#inner").resizable();

虽然在一个简化的例子中这是可以的，但在实践中它很令人头疼，因为我的可调整大小的init很复杂，并且不容易重做。

是否有人知道任何其他变通方法/补丁可以让我破坏外部可调整大小并保持内部可调整大小而不必破坏和重新创建内部？

先谢谢你的帮助。

Answer 1

我的方法是扩展可调整大小的窗口小部件，并覆盖其_destroy方法。将原始_destroy方法复制到扩展窗口小部件并替换

find(".ui-resizable-handle")

与

children(".ui-resizable-handle")

整个代码如下：

$.widget( "ui.customResizable", $.ui.resizable, {
    _destroy: function() {

        this._mouseDestroy();

        var wrapper,
            _destroy = function(exp) {
                $(exp).removeClass("ui-resizable ui-resizable-disabled ui-resizable-resizing")
                    //The only place you need to change is replace find with children.
                    .removeData("resizable").removeData("ui-resizable").unbind(".resizable").children(".ui-resizable-handle").remove();
            };

        //TODO: Unwrap at same DOM position
        if (this.elementIsWrapper) {
            _destroy(this.element);
            wrapper = this.element;
            this.originalElement.css({
                position: wrapper.css("position"),
                width: wrapper.outerWidth(),
                height: wrapper.outerHeight(),
                top: wrapper.css("top"),
                left: wrapper.css("left")
            }).insertAfter( wrapper );
            wrapper.remove();
        }

        this.originalElement.css("resize", this.originalResizeStyle);
        _destroy(this.originalElement);

        return this;
    }
} );

比使用扩展小部件而不是原始可调整大小。

$("#outer").customResizable();
$("#inner").customResizable();
$("#outer").customResizable("destroy");

Answer 2

你可以试试这个：

var inner_clone = $('#inner').clone(true);
$('#outer').resizable('destroy');
$('#inner').replaceWith(inner_clone);

使用.clone（true）应该保持可调整大小的功能。

嵌套的可调整大小 - 如何破坏父级而不是子级？

2 个答案: