0

jQuery UI を使用してサイズ変更可能オブジェクトをネストしました。

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

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

サイズ変更可能な外側を破壊したいのですが、内側は破壊したくありません。残念ながら、これを行うだけです...

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

...サイズ変更可能な内部も壊れます。現在、これを機能させる唯一の方法は、最初に子を破棄し、次に親を破棄し、次に子を再初期化することです。

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

これは単純化された例では問題ありませんが、実際には、サイズ変更可能な init が複雑で、その場でやり直すのが簡単ではないため、頭痛の種です。

内側を破棄して再作成することなく、サイズ変更可能な外側を破棄し、内側をサイズ変更可能に保つことができる他の回避策/パッチを知っている人はいますか?

（事前に）ご協力いただきありがとうございます。

4

2 に答える 2

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");
于 2013-12-18T08:24:14.640 に答える
0

あなたはこれを試すことができます：

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

.clone(true)を使用すると、サイズ変更可能な機能が保持されます。

于 2013-01-04T19:45:19.567 に答える