嵌套可调整大小的元素

Question

我正在使用 jQuery UI 的可调整大小的嵌套 div，如下所示：

<div id="resizable1">
   <div id="resizable2">
   </div>
</div>

我遇到了一个问题，禁用可调整大小 1 也会禁用可调整大小 2。因此，如果我调用以下命令...

$("#resizable1").resizable("disable");

...那么我也无法再调整可调整大小 2 的大小。

有其他人遇到过这种情况，并且知道解决这种行为的方法吗？

谢谢，

特拉维斯

Answer 1

我在使用嵌套可调整大小时也遇到了麻烦。设置第二个（嵌套）后，我失去了调整顶层大小的能力。

为了解决这个问题，我初始化并在悬停/移出时销毁嵌套的解决方案：

$(".the-nested-elements").each(function() {
  $(this).hover(function() {
    $(this).resizable();
  },function() {
    $(this).resizable("destroy");                       
  });
});

这不是最优雅的解决方案，但它有效。

Answer 2

有点晚了，因为我确信您已经继续前进，但我遇到了同样的问题。这与一个已知问题有关：http://bugs.jqueryui.com/ticket/5973

根据 rdworth 的说法，您可以为此采取解决方法：

$("#resizable1").resizable("disable")
    .removeClass("ui-state-disabled ui-resizable-disabled")
    .children(".ui-resizable-handle").hide();

您可以在以下位置查看原始帖子： http://forum.jquery.com/topic/trouble-with-nested-resizings，或查看小提琴：