可拖拽调整大小对话框：相对定位div调整时位置偏移，求双向调整方案

1. 开启所有方向的调整手柄 #

jQuery UI的resizable默认只启用右下角的调整手柄，要支持从左/上方向调整，需显式配置handles参数，开启所有方向的手柄：

$("#os_window").resizable({
  handles: "n, e, s, w, ne, se, sw, nw" // 启用8个方向的调整手柄，覆盖默认值
});

2. 解决调整时位置偏移的问题 #

你的对话框大概率用了transform: translate()这类CSS属性定位，这会和jQuery UI的位置计算逻辑冲突——jQuery UI基于元素的offset属性计算位置，而transform不会改变元素的offset，只会改变视觉位置，导致调整大小时出现位置跳变。

解决方法是把定位方式改成绝对定位+top/left，替换掉transform：

#os_window {
  position: absolute;
  top: 50px; /* 自定义初始位置 */
  left: 50px;
  transform: none; /* 移除transform相关属性 */
  transform-origin: top left; /* 现在这个设置会生效 */
}

如果必须保留transform定位（比如需要居中），可以在resizable的resize回调里手动修正位置，但这种方式比较繁琐，优先推荐用绝对定位。

3. 完整修改后的代码示例 #

$("#os_window").draggable({ handle: "#window_top_bar" });
$("#os_window").resizable({
  handles: "n, e, s, w, ne, se, sw, nw",
  // 可选：如果还有位置问题，强制清除transform
  resize: function(event, ui) {
    ui.element.css("transform", "none");
  }
});

内容的提问来源于stack exchange，提问作者Paul Tennant