尧图网页设计 
前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载Resizable Container 是 Metro UI CSS 提供的一个轻量级工具型组件它会在任意元素四周生成一圈拖拽手柄resize handles用户按住手柄即可调整元素的尺寸同时完整支持鼠标与触摸操作、最小/最大尺寸约束以及按需控制哪些边/角可被拖拽。本文以 官方组件文档 为主体结合 组件源码、样式源码 与 完整示例从声明式用法、运行时开关、API 调用、事件体系到八个方向的底层数学实现带你完整掌握该组件的实战能力。一、组件概览与适用场景从源码结构看该组件是注册在Metro.Component(resizable-container, ...)下的标准 Metro 插件见 resizable-container.js并在 components/index.js 中随全量组件一并导出。它适合以下典型场景让用户自由调整侧边栏、面板、弹窗等区块的尺寸在布局编辑器中提供可视化尺寸调整与draggable等组件组合实现可移动、可缩放的自由容器。组件对外暴露三类核心能力手柄生成与拖拽调整、min/max 尺寸约束、运行时可启停的调整模式。二、快速上手声明式用法data-role组件支持完全通过 HTML 属性初始化无需编写任何 JavaScript。最基本的用法只要求一个data-rolediv>div >div idbox>script // 组件通过 MutationObserver 感知到属性变化并自动启停 $(#box).attr(data-can-resize, true) // 启用 $(#box).attr(data-can-resize, false) // 禁用 /script在 示例页面 中正是用热键切换data-can-resize来实现调整模式的开关。方式二API 方法推荐div idbox>div idmy-resizable/div script Metro.makePlugin(#my-resizable, resizable-container, { canResize: true, resizePointers: nw, ne, se, sw, // 只保留四个角 minWidth: 150, minHeight: 100, }) /scriptMetro.makePlugin的底层实现见 core/metro.js会先规范化组件名再调用 jQuery/Dom 的$el_name完成初始化最后通过Metro.getPlugin返回插件实例——因此上面这段代码返回的对象可以直接调用enable()、disable()、size()等方法。Metro.getPlugin的本质是从元素的data-metroComponent数据缓存中取出对应插件实例见 core/metro.js。五、参数详解与默认值组件的全部可用参数及其默认值如下表与 组件默认配置 一一对应参数类型默认值说明canResizebooleantrue是否允许调整尺寸为false时按下手柄无响应pointer down 被忽略resizePointersstringnw, n, ne, e, se, s, sw, w逗号分隔的允许手柄列表合法值n, s, e, w, ne, nw, se, swminWidthnumber0最小宽度像素0表示不限制minHeightnumber0最小高度像素0表示不限制maxWidthnumber0最大宽度像素0表示不限制maxHeightnumber0最大高度像素0表示不限制initWidthnumber0初始宽度像素initHeightnumber0初始高度像素数据属性与参数名的映射使用 HTML 属性时采用与选项名一致的短横线命名法div >div >const rc Metro.getPlugin(#my-resizable, resizable-container) rc.disable() rc.enable()八、源码原理八个方向的拖拽数学在 resizable-container.js 的_createEvents中组件用一套统一的思路处理所有手柄方向手柄pointerdownMetro.events.startAll时记录起始指针坐标startXY以及元素当前的top/left/width/heightgetBoundingClientRect()在document上绑定移动moveAll与松开stopAll事件计算指针位移deltaX、deltaY每个方向按几何规则更新尺寸必要时同步修正top/left并统一经Metro.utils.clamp钳制在[min, max]区间内。各方向的计算逻辑可归纳为南sheight clamp(height deltaY)只改高度东ewidth clamp(width deltaX)只改宽度北n高度随-deltaY变化同时top反向补偿newTop top (height - newH) - parentTop保证北边被拖动、南边固定西w宽度随-deltaX变化同时left反向补偿角方向ne/nw/se/sw则是两个轴向的组合例如se s e宽高都增、nw n w宽高都减并同时修正top与left。正是由于n/w/ne/nw这类方向会移动元素的top/left组件在初始化时做了两个关键铺垫见_createStructureresizable-container.js若目标元素的position为static自动改写为relative使top/left生效手柄所在的.rc-contour以及每个.rc-point会被赋予高于元素内部子元素的z-index组件遍历元素所有子节点、取最大zIndex再加 2/3确保手柄永远浮在内容之上见 resizable-container.js。此外手柄元素都带data-resize-direction属性记录方向拖拽时通过$(this).attr(data-resize-direction)读取见 resizable-container.js这也是调试 DOM 时识别手柄方向的依据。九、样式定制CSS 变量与类组件通过 CSS 变量暴露了最常用的视觉定制点不建议直接改内部结构。尺寸类变量变量默认值说明--resizable-container-border-width1px虚线轮廓与手柄边框的宽度--resizable-container-point-size8px每个手柄的边长宽高一致通过aspect-ratio: 1保证正方形见 resizable-container.less颜色类变量含暗色模式变量默认值浅色暗色模式说明--resizable-container-border-color#000#fff虚线边框与手柄描边颜色颜色变量定义在:root暗色模式由.dark-side作用域覆盖见 resizable-container.less。在手柄居中定位上边手柄n/s/e/w还叠加了约 1px 的偏移translateY(calc(-50% - 1px))等使手柄中心与虚线重合。在目标元素上覆盖变量即可完成定制#my-resizable { --resizable-container-border-color: var(--color-crimson); --resizable-container-border-width: 2px; --resizable-container-point-size: 10px; }内部类结构.resizable-container— 挂在目标元素上的根类.rc-contour— 内部覆盖层负责绘制虚线边框并承载手柄当其带有.disabled类时整个手柄层display: none.rc-point— 每个手柄的基类配合修饰类-n、-s、-e、-w、-ne、-nw、-se、-sw决定手柄的定位锚点与鼠标光标如nw-resize、se-resize等见 resizable-container.less。此外根类上设置了user-select: none避免拖拽过程中选中文本造成干扰见 resizable-container.less。十、与 draggable 组件组合的实战范式组件文档特别提到与draggable配合的注意事项示例页面 就是一个可运行的完整组合div classdemo-box >赞分享前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载相关推荐Penrose Bloom 交互式图表开发指南拖拽Dragging与拖拽约束dragConstraint实战Penrose Bloom 交互式图表开发指南拖拽Dragging与拖拽约束dragConstraint实战 导读 Bloom 是 Penrose 仓开发工具数据可视化ng-zorro-antd Resizable 自定义拖拽柄Handle样式实战指南ng zorro antd Resizable 自定义拖拽柄Handle样式实战指南 导读 拖拽调整尺寸是桌面端布局中常见的交互能力。ng zorro anUI组件前端VueDraggablePlus拖拽手柄实现精准控制拖拽区域的终极指南VueDraggablePlus拖拽手柄实现精准控制拖拽区域的终极指南 VueDraggablePlus是一款支持Vue 3和Vue 2的通用拖拽组件本文将前端UI组件上一篇RxDB LocalStorage 存储引擎RxStorage Localstorage在浏览器中用最小配置实现本地持久化下一篇OpenDesign Revolut 设计系统包使用指南从 Tokens 契约到组件还原的 Agent 实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Metro UI CSS Resizable Container 实战指南：拖拽手柄、约束控制与运行时开关
前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载Resizable Container 是 Metro UI CSS 提供的一个轻量级工具型组件它会在任意元素四周生成一圈拖拽手柄resize handles用户按住手柄即可调整元素的尺寸同时完整支持鼠标与触摸操作、最小/最大尺寸约束以及按需控制哪些边/角可被拖拽。本文以 官方组件文档 为主体结合 组件源码、样式源码 与 完整示例从声明式用法、运行时开关、API 调用、事件体系到八个方向的底层数学实现带你完整掌握该组件的实战能力。一、组件概览与适用场景从源码结构看该组件是注册在Metro.Component(resizable-container, ...)下的标准 Metro 插件见 resizable-container.js并在 components/index.js 中随全量组件一并导出。它适合以下典型场景让用户自由调整侧边栏、面板、弹窗等区块的尺寸在布局编辑器中提供可视化尺寸调整与draggable等组件组合实现可移动、可缩放的自由容器。组件对外暴露三类核心能力手柄生成与拖拽调整、min/max 尺寸约束、运行时可启停的调整模式。二、快速上手声明式用法data-role组件支持完全通过 HTML 属性初始化无需编写任何 JavaScript。最基本的用法只要求一个data-rolediv>div >div idbox>script // 组件通过 MutationObserver 感知到属性变化并自动启停 $(#box).attr(data-can-resize, true) // 启用 $(#box).attr(data-can-resize, false) // 禁用 /script在 示例页面 中正是用热键切换data-can-resize来实现调整模式的开关。方式二API 方法推荐div idbox>div idmy-resizable/div script Metro.makePlugin(#my-resizable, resizable-container, { canResize: true, resizePointers: nw, ne, se, sw, // 只保留四个角 minWidth: 150, minHeight: 100, }) /scriptMetro.makePlugin的底层实现见 core/metro.js会先规范化组件名再调用 jQuery/Dom 的$el_name完成初始化最后通过Metro.getPlugin返回插件实例——因此上面这段代码返回的对象可以直接调用enable()、disable()、size()等方法。Metro.getPlugin的本质是从元素的data-metroComponent数据缓存中取出对应插件实例见 core/metro.js。五、参数详解与默认值组件的全部可用参数及其默认值如下表与 组件默认配置 一一对应参数类型默认值说明canResizebooleantrue是否允许调整尺寸为false时按下手柄无响应pointer down 被忽略resizePointersstringnw, n, ne, e, se, s, sw, w逗号分隔的允许手柄列表合法值n, s, e, w, ne, nw, se, swminWidthnumber0最小宽度像素0表示不限制minHeightnumber0最小高度像素0表示不限制maxWidthnumber0最大宽度像素0表示不限制maxHeightnumber0最大高度像素0表示不限制initWidthnumber0初始宽度像素initHeightnumber0初始高度像素数据属性与参数名的映射使用 HTML 属性时采用与选项名一致的短横线命名法div >div >const rc Metro.getPlugin(#my-resizable, resizable-container) rc.disable() rc.enable()八、源码原理八个方向的拖拽数学在 resizable-container.js 的_createEvents中组件用一套统一的思路处理所有手柄方向手柄pointerdownMetro.events.startAll时记录起始指针坐标startXY以及元素当前的top/left/width/heightgetBoundingClientRect()在document上绑定移动moveAll与松开stopAll事件计算指针位移deltaX、deltaY每个方向按几何规则更新尺寸必要时同步修正top/left并统一经Metro.utils.clamp钳制在[min, max]区间内。各方向的计算逻辑可归纳为南sheight clamp(height deltaY)只改高度东ewidth clamp(width deltaX)只改宽度北n高度随-deltaY变化同时top反向补偿newTop top (height - newH) - parentTop保证北边被拖动、南边固定西w宽度随-deltaX变化同时left反向补偿角方向ne/nw/se/sw则是两个轴向的组合例如se s e宽高都增、nw n w宽高都减并同时修正top与left。正是由于n/w/ne/nw这类方向会移动元素的top/left组件在初始化时做了两个关键铺垫见_createStructureresizable-container.js若目标元素的position为static自动改写为relative使top/left生效手柄所在的.rc-contour以及每个.rc-point会被赋予高于元素内部子元素的z-index组件遍历元素所有子节点、取最大zIndex再加 2/3确保手柄永远浮在内容之上见 resizable-container.js。此外手柄元素都带data-resize-direction属性记录方向拖拽时通过$(this).attr(data-resize-direction)读取见 resizable-container.js这也是调试 DOM 时识别手柄方向的依据。九、样式定制CSS 变量与类组件通过 CSS 变量暴露了最常用的视觉定制点不建议直接改内部结构。尺寸类变量变量默认值说明--resizable-container-border-width1px虚线轮廓与手柄边框的宽度--resizable-container-point-size8px每个手柄的边长宽高一致通过aspect-ratio: 1保证正方形见 resizable-container.less颜色类变量含暗色模式变量默认值浅色暗色模式说明--resizable-container-border-color#000#fff虚线边框与手柄描边颜色颜色变量定义在:root暗色模式由.dark-side作用域覆盖见 resizable-container.less。在手柄居中定位上边手柄n/s/e/w还叠加了约 1px 的偏移translateY(calc(-50% - 1px))等使手柄中心与虚线重合。在目标元素上覆盖变量即可完成定制#my-resizable { --resizable-container-border-color: var(--color-crimson); --resizable-container-border-width: 2px; --resizable-container-point-size: 10px; }内部类结构.resizable-container— 挂在目标元素上的根类.rc-contour— 内部覆盖层负责绘制虚线边框并承载手柄当其带有.disabled类时整个手柄层display: none.rc-point— 每个手柄的基类配合修饰类-n、-s、-e、-w、-ne、-nw、-se、-sw决定手柄的定位锚点与鼠标光标如nw-resize、se-resize等见 resizable-container.less。此外根类上设置了user-select: none避免拖拽过程中选中文本造成干扰见 resizable-container.less。十、与 draggable 组件组合的实战范式组件文档特别提到与draggable配合的注意事项示例页面 就是一个可运行的完整组合div classdemo-box >赞分享前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载相关推荐Penrose Bloom 交互式图表开发指南拖拽Dragging与拖拽约束dragConstraint实战Penrose Bloom 交互式图表开发指南拖拽Dragging与拖拽约束dragConstraint实战 导读 Bloom 是 Penrose 仓开发工具数据可视化ng-zorro-antd Resizable 自定义拖拽柄Handle样式实战指南ng zorro antd Resizable 自定义拖拽柄Handle样式实战指南 导读 拖拽调整尺寸是桌面端布局中常见的交互能力。ng zorro anUI组件前端VueDraggablePlus拖拽手柄实现精准控制拖拽区域的终极指南VueDraggablePlus拖拽手柄实现精准控制拖拽区域的终极指南 VueDraggablePlus是一款支持Vue 3和Vue 2的通用拖拽组件本文将前端UI组件上一篇RxDB LocalStorage 存储引擎RxStorage Localstorage在浏览器中用最小配置实现本地持久化下一篇OpenDesign Revolut 设计系统包使用指南从 Tokens 契约到组件还原的 Agent 实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考