如何在不破坏儿童可调整大小的情况下销毁可调整大小的jquery？

Question

我有一个可调整大小的父div(仅宽度) - 在这个div中我有许多其他div也是可调整大小的(仅限高度).

有时我想要禁用或破坏父宽度调整大小,但保持内部高度调整大小.

当我打电话时$("#idTopDiv").resizable("destroy");,这也会破坏所有子div上的可调整大小.

典型布局是: -

<div id=idDivTop> <!-- Resizable width -->
    <div id=idInnerOne>
    </div>

    <div id=idInnerTwo> <!-- Resizable height -->
    <div>
</div>

欣赏任何想法.

Answer 1

我认为这是因为resizable的破坏会删除ui元素内部的所有resize handels,这恰好包括内部resizables的resize句柄.因此内部可调整大小实际上并没有被破坏,他们只是搞砸了.

你可以在这里看到Resizable源代码; 它发生在第199行.find('.ui-resizable-handle').remove();.

要解决此问题,您还需要在内部resizable上调用destroy方法,然后重新创建它们.(jsfiddle)

$("div").resizable();

// Destroy all three resizables
$("div").resizable("destroy");

// Recreate the inner resizables
$("#idInnerOne, #idInnerTwo").resizable();

您需要这样做以删除在创建时可设置大小的绑定和数据,否则当您尝试重新创建它时它会认为它已经创建,并且它将不执行任何操作.

您可能还会考虑禁用外部resizable而不是销毁它,但这有其自身的问题.