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

时间:2021-05-23 19:43:57

I have a parent div which is resizable (width only) - within this div I have a number of other divs that are also resizable (height only).

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

At times I want to either disable or destroy the parent width resizing but leave the inner height resizing in place.

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

When I call $("#idTopDiv").resizable("destroy");, this destroys the resizables on all of the child divs as well.

当我调用$(“#idTopDiv”)。resizable(“destroy”);时,这也会破坏所有子div上的resizable。

Typical layout is:-

典型布局是: -

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

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

Appreciate any ideas.

欣赏任何想法。

1 个解决方案

#1


6  

I think this happens because the destroy of resizable removes all resize handels inside of the ui element, which happens to include the resize handles for the inside resizables. So the inside resizables aren't actually being destroyed, they're just getting messed up.

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

You can see the Resizable source code here; its happening at line 199 where it says .find('.ui-resizable-handle').remove();.

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

To fix this you need to call the destroy method on the inner resizables also and then recreate them. (jsfiddle)

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

$("div").resizable();

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

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

You need to do that to remove bindings and data that resizable sets up upon creation, otherwise it will think its already created when you try re-creating it and it will do nothing.

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

You might also consider disabling the outer resizable instead of destroying it, but that has its own issues.

您也可以考虑禁用外部resizable而不是销毁它,但这有其自身的问题。

#1


6  

I think this happens because the destroy of resizable removes all resize handels inside of the ui element, which happens to include the resize handles for the inside resizables. So the inside resizables aren't actually being destroyed, they're just getting messed up.

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

You can see the Resizable source code here; its happening at line 199 where it says .find('.ui-resizable-handle').remove();.

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

To fix this you need to call the destroy method on the inner resizables also and then recreate them. (jsfiddle)

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

$("div").resizable();

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

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

You need to do that to remove bindings and data that resizable sets up upon creation, otherwise it will think its already created when you try re-creating it and it will do nothing.

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

You might also consider disabling the outer resizable instead of destroying it, but that has its own issues.

您也可以考虑禁用外部resizable而不是销毁它,但这有其自身的问题。