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

Posted 2023-05-08

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

【英文标题】：JQuery UI: How to place the resize handle somewhere else in a container?

【发布时间】：2021-04-09 14:38:43

【问题描述】：

这是一个小型工作示例，演示了使用 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 来实现这一点，那么如何通过不同的方法来实现呢？

【问题讨论】：

可以 $("#bar1").resizable(alsoResize: '#outer1'); 帮助吗？

【参考方案1】：

解决方法很简单：

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

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