前端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点击查看免费下载导读Drag Items 是 Metro UI CSS 中用于在容器内实现可拖拽、可排序列表的官方组件。它以data-roledrag-items声明式初始化无需额外依赖即可为任意列表或自定义元素集合提供拖拽移动、排序、拖拽标记与拖拽头像等能力。阅读本文后你将掌握该组件的全部配置参数、事件体系、编程 API 以及全局配置方式并能从源码层面理解其拖拽排序的判定逻辑从而在项目中灵活定制拖拽交互。组件概述与适用场景Drag Items 组件允许用户在容器内拖拽并重新排列列表项是构建可排序列表、可拖拽 UI 元素集合的轻量方案。其核心设计特点包括零依赖官方 README 明确说明该组件无需任何附加依赖即可使用见 README.md声明式初始化通过data-roledrag-items属性即可激活事件驱动提供拖拽开始、移动、放下、命中目标等完整事件钩子无框架绑定底层基于 Metro UI 的Metro.Component体系与Metro.events统一事件抽象适用于纯 HTML/JS 项目也可与 jQuery 风格 API 配合使用。该组件适用于任务看板拖拽、设置项排序、收藏列表管理、自定义工具栏编排等需要拖拽换位的场景。引入与依赖Drag Items 的代码与样式位于source/components/drag-items/目录由 index.js 统一导入import ./drag-items.js; import ./drag-items.less;在完整构建的 Metro UI CSS 中它已通过 source/components/index.js第 50 行import ./drag-items/index.js;纳入组件全家桶因此只需照常引入lib/metro.css与lib/metro.js即可使用无需单独加载任何脚本。官方还提供了一个可直接运行的示例页面 examples/drag-items.html其中展示了两个默认data-roledrag-items列表的用法对应的冒烟测试见 tests/drag-items.test.js测试会实际加载该示例页面并断言页面无脚本错误。基础用法声明式初始化在任意容器如ul上添加data-roledrag-items其子元素默认选择器为li即可被拖拽重排ul>element.addClass(drag-items-target); if (o.drawDragMarker true) { element.find(o.dragItem).each(function () { $(span).addClass(drag-item-marker).appendTo(this); }); }插件参数详解以下是该组件支持的全部参数默认值与说明源自官方 README行为细节由源码佐证参数类型默认值说明dragItemsDeferrednumber0初始化前延迟的毫秒数targetstring/objectnull接收拖放项的目标元素dragItemstringli可拖拽项的选择器dragMarkerstring.drag-item-marker拖拽标记选择器drawDragMarkerbooleanfalse是否绘制拖拽标记汉堡图标clsDragItemAvatarstring追加到拖拽头像的额外 CSS 类clsDragItemstring追加到被拖拽项的额外 CSS 类canDragbooleantrue是否允许拖拽这些默认值在 drag-items.js 的DragItemsDefaultConfig中原样定义与 README 完全一致。参数可通过data-*属性或初始化选项两种方式传入。高级配置示例!-- 显示拖拽标记汉堡图标 -- ul>const dragItems Metro.getPlugin(#myList, drag-items);方法作用on()启用拖拽功能off()禁用拖拽功能toggle()在启用/禁用之间切换destroy()移除事件处理器并清理组件方法调用示例// 启用拖拽 const dragItems Metro.getPlugin(#myList, drag-items); dragItems.on(); // 禁用拖拽 dragItems.off(); // 切换拖拽状态 dragItems.toggle(); // 销毁组件 dragItems.destroy();源码层面toggle()的实现巧妙地复用自身返回值来完成状态翻转drag-items.jstoggle: function () { this.canDrag this.canDrag ? this.off() : this.on(); },而destroy()的核心是解除容器上绑定的起始事件监听并返回容器元素供链式操作L234-L239destroy: function () { const element this.element; const o this.options; element.off(Metro.events.startAll, o.drawDragMarker ? o.dragMarker : o.dragItem); return element; },事件体系组件提供以下事件其中onTargetIn、onTargetOut在源码中标注为 TODO即规划中但尚未实现见 drag-items.js事件说明onDragStartItem拖拽开始时触发onDragMoveItem拖拽移动过程中触发onDragDropItem项目放下时触发onTarget悬停在目标容器上方时触发onTargetIn进入目标时触发规划中未实现onTargetOut离开目标时触发规划中未实现onDragItemsCreate组件创建完成时触发事件使用示例可以用 jQuery 风格的事件名绑定事件名使用连字符形式也可以直接在data-*属性中指定回调$(#myList).on(drag-start-item, function(e, data){ console.log(Started dragging:, data.dragItem); });ul>startAll: mousedown touchstart, stopAll: mouseup touchend, moveAll: mousemove touchmove,因此该组件天然同时支持鼠标与触摸两种输入。一次完整拖拽的流程如下对应 drag-items.js 的_createEvents按下startAll命中可拖拽项或拖拽标记后排除右键Metro.utils.isRightMouse并检查内部canDrag状态随后给被拖拽项添加dragged-item类源码中该类让原项以opacity: .3半透明呈现创建并定位一个dragged-item-avatar头像div追加到body计算按下点与元素左上角的偏移量shift触发drag-start-item移动moveAll根据指针坐标减去偏移量持续更新头像位置随后通过document.elementsFromPoint(x, y)命中检测过滤出带drag-items-target类的目标容器命中则触发target事件再过滤出符合dragItem选择器的相邻兄弟节点排除头像自身若光标下没有兄弟节点直接把被拖拽项appendTo目标容器若存在兄弟节点则按左 1/3、右 2/3、上 1/2、下 1/2的三区判定决定side据此调用insertBefore或insertAfter完成实时换位L104-L136触发drag-move-item松开stopAll触发drag-drop-item移除dragged-item与自定义类、删除头像并按命名空间ns: this.id解除moveAll/stopAll的临时监听完成一次拖拽生命周期。需要特别注意的是排序判定中左侧/顶部优先side top || side left时insertBefore且逻辑上避免了把项插入到它自身带dragged-item类的兄弟会被跳过。这是理解组件换位结果的关键细节。样式体系与 CSS 变量组件样式定义在 drag-items.less 中颜色与层级均取自 Metro UI 的 Less 变量体系import自source/include/vars与source/include/mixins。各变量的默认值及用途如下变量默认值亮色暗色模式用途transparenttransparenttransparent拖拽标记背景色white#ffffff#ffffff拖拽标记线条颜色dark#1d1d1d#1d1d1d暗色主题下的标记线条颜色blue#4390df#4390df拖拽头像背景色z-index-absolute20002000拖拽头像的层叠层级primaryColor#5c92fa#5c92fa拖拽头像的 box-shadow 内阴影颜色其中dragged-item-avatar的阴影使用了rgba(red(primaryColor), green(primaryColor), blue(primaryColor), 1)的 Less 函数从主色推导出 RGB 分量drag-items.less因此调整primaryColor会同步影响头像的内阴影色调。自定义样式示例CSS 变量与类名均开放可直接覆盖/* 自定义拖拽标记颜色 */ .my-list .drag-item-marker { border-top-color: red; } .my-list .drag-item-marker::before, .my-list .drag-item-marker::after { background-color: red; } /* 自定义被拖拽项头像 */ .my-list .dragged-item-avatar { background-color: purple; opacity: 0.5; }可用 CSS 类基础类类名作用.drag-items-target容器元素.dragged-item被拖拽项源码中默认opacity: .3.drag-item-marker拖拽标记汉堡图标样式.dragged-item-avatar拖拽时跟随光标的头像元素样式修饰类类名作用.drag-marker-dark拖拽标记的暗色主题变体源码中.drag-marker-dark的作用域写法为.drag-marker-dark .drag-item-marker通过dark变量把标记线条切换为深色drag-items.less适合浅色背景上的暗色标记需求。另外拖拽标记本体由::before/::after伪元素构成三条 4px 横线模拟汉堡图标cursor: move提示可拖拽L11-L36。全局默认配置可以为所有 Drag Items 组件设置全局默认值使用Metro.dragItemsSetupMetro.dragItemsSetup({ dragItem: div, drawDragMarker: true, clsDragItemAvatar: custom-avatar });源码中该函数会以$.extend合并到DragItemsDefaultConfigdrag-items.js之后所有新建的组件都会以合并后的配置作为默认值。此外组件还支持通过全局对象预置配置在脚本加载前定义globalThis.metroDragItemsSetup组件模块初始化时会自动调用Metro.dragItemsSetup(globalThis.metroDragItemsSetup)完成注入L27-L29。这一机制适合在引入库之前、通过一个script标签统一声明项目级的拖拽默认行为。验证与测试仓库中与该组件配套的自动化测试位于 tests/drag-items.test.js它基于olton/latte测试框架实际访问 examples/drag-items.html 页面并断言无脚本错误。示例页本身展示了两列独立的可拖拽列表可作为上手调试的起点引入lib/metro.css与lib/metro.js后在控制台执行Metro.getPlugin(document.querySelector([data-roledrag-items]), drag-items)即可拿到组件实例验证on()/off()/toggle()的实时效果。小结Drag Items 是 Metro UI CSS 中一个小而完整的拖拽排序组件声明式data-role初始化、8 个可调参数、4 个编程方法、7 个事件钩子、全局配置入口与完整的事件生命周期覆盖足以应对大多数列表重排需求。理解其按下创建头像 → 移动三分区换位 → 松开清理的源码实现后你还可以在此基础上扩展跨容器拖拽、拖拽限制区域等更复杂的交互后者的思路可参考仓库中独立的 draggable 组件。如需深入可直接阅读 drag-items.js、drag-items.less 与 README.md并以 examples/drag-items.html 为实验环境。赞分享前端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点击查看免费下载相关推荐xadmin可排序列表拖拽排序功能的完整实现原理xadmin可排序列表拖拽排序功能的完整实现原理 想要让Django后台的数据列表支持 拖拽排序 功能吗 xadmin的 可排序列表插件 可以帮你轻松实后端UI组件autonomous-researcher模型选择指南Gemini 3 Pro vs Claude Opus 4.5性能对比autonomous researcher模型选择指南Gemini 3 Pro vs Claude Opus 4.5性能对比 autonomous reseaVueDraggablePlus表格拖拽指南实现Element-UI表格列排序VueDraggablePlus表格拖拽指南实现Element UI表格列排序 VueDraggablePlus是一款强大的拖拽组件支持Vue 3和Vue前端UI组件上一篇machine-learning-yearning-cn推荐系统的深度学习架构与优化下一篇OpenAI Python库实战指南7步构建高效AI应用的完整方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考