JQuery UI：如何将调整大小句柄放置在容器中的其他位置？

Question

这是一个小型工作示例，演示了使用 JQuery UI 调整（复杂）容器的大小：

$("#outer1").resizable({
    minHeight: 150,
    minWidth: 400,
});

body {
  background-color: #808080;
  display: flex;
}

#outer1 {
  position: absolute;
  width: 500px;
  height: 150px;
  background-color: #c0c0c0;
  border: 1px solid blue;

  display: flex;
  flex-direction: rows;
  flex-wrap: nowrap;
  align-items: stretch;
}

#left1 {
  width: 400px;
  height: 150px;
  background-color: #c0c0c0;
  border: 1px solid blue;

  flex-grow: 1;
  flex-shrink: 1;
  height: auto;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

#center1 {
  background-color: #e0e0e0;
  flex-grow: 1;
  flex-shrink: 1;
  height: auto;
}

#bar1 {
  background-color: #c0c0ff;
  flex-grow: 0;
  flex-shrink: 0;
  height: 30px;
}

#right1 {
  background-color: #a0e0a0;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="outer1" >
    <div id="left1" >
        <div id="center1">
            foo
        </div>
        <div id="bar1">
            bar
        </div>
    </div>
    <div id="right1">
        x
    </div>
</div>

这将显示一个蓝灰色的容器，右侧附有一个绿色框。调整大小的手柄直接放在容器的右下角。

现在：如何将调整大小手柄放在容器中蓝色框的右下角？如果这个句柄被移动，那么整个容器应该被调整大小。这样，绿色框会感觉“附着”到蓝灰色框，并在调整大小时与其他框一起移动。

背景：下一步我想将容器背景设置为透明，并使绿色框的高度更小。这样一来，感觉就像绿色盒子会连接到其余部分一样。从技术上讲，一切仍然是单个div，但对用户而言，感觉会有所不同：用户会将灰蓝色区域视为“盒子”。但是对于这种方法，调整大小的句柄需要放在容器底部的蓝色框内。

有谁知道如何使用 JQuery UI 来实现这一点？

如果事实证明无法使用 JQuery UI 来实现这一点，那么如何通过不同的方法来实现呢？

Answer 1

解决方法很简单：

$("#left1").resizable({
    alsoResize: "#outer1"
});

谢谢@gaetanoM，您为解决方案提供了关键的想法！好主意！