jQuery UI Resizable（缩放）实例
jQuery UI 的 Resizable 交互允许用户通过鼠标拖动元素边角或边框来改变元素大小。常用于实现可调整大小的窗口、面板、分栏布局、图片预览等。
推荐查看官方演示：https://jqueryui.com/resizable/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础缩放示例
最简单的可缩放元素，默认显示所有方向的手柄（e、s、se 等）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#resizable { width: 200px; height: 150px; padding: 20px; background: #2196F3; color: white; text-align: center; }
</style>
</head>
<body>
<div id="resizable" class="ui-widget-content">拖动边角或边框缩放我！</div>
<script>
$(function() {
$("#resizable").resizable();
});
</script>
</body>
</html>2. 指定手柄与限制（handles、min/max、aspectRatio）
handles: "se"：只显示东南角手柄。minWidth/minHeight和maxWidth/maxHeight：限制最小/最大尺寸。aspectRatio: true：保持宽高比例（适合图片）。
<div id="resizable2" class="ui-widget-content">保持比例缩放（仅东南角）</div>
<style>
#resizable2 { width: 300px; height: 200px; background: #4CAF50; padding: 20px; }
</style>
<script>
$("#resizable2").resizable({
handles: "se", // 只东南角手柄
minWidth: 100,
minHeight: 80,
maxWidth: 500,
maxHeight: 400,
aspectRatio: true // 保持宽高比
});
</script>3. 视觉效果（ghost、animate、containment）
ghost: true：缩放时显示半透明“幽灵”副本，原元素不动直到结束。animate: true：缩放结束时动画过渡。containment: "parent"：限制缩放在父容器内。
<div style="width: 600px; height: 400px; border: 2px solid #000; position: relative; padding: 20px;">
<div id="resizable3">幽灵 + 动画效果（限制在容器内）</div>
</div>
<style>
#resizable3 { width: 200px; height: 150px; background: #FF9800; }
</style>
<script>
$("#resizable3").resizable({
ghost: true, // 幽灵效果
animate: true, // 动画过渡
containment: "parent", // 限制在父容器
handles: "all" // 所有方向手柄
});
</script>4. 事件回调（resize、start、stop）
监听缩放过程，实时获取尺寸或执行逻辑。
<div id="resizable4">实时显示尺寸</div>
<p>当前尺寸: <span id="size">200 x 150</span></p>
<script>
$("#resizable4").resizable({
resize: function(event, ui) {
$("#size").text(ui.size.width + " x " + ui.size.height);
},
start: function() { console.log("开始缩放"); },
stop: function() { console.log("停止缩放"); }
});
</script>Resizable 常与 Draggable 结合实现可拖动可缩放的窗口，或用于布局分栏（结合 resize 事件调整相邻元素）。如果你需要与 Draggable 结合的模态窗口示例、同步缩放多个元素，或网格对齐（grid）效果，请提供更多细节！
