Web-Dev-For-Beginners 之 Terrarium 拖拽项目用 HTML、CSS 与 DOM 闭包构建交互式玻璃罐植物园并部署上线【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners导读Terrarium玻璃罐植物园是 Web-Dev-For-Beginners 课程中第三大模块的完整落地产物一个用少量 HTML、JavaScript 与 CSS 就能完成的拖拽式代码冥想小应用。本文以项目 solution 说明文档 为核心骨架结合 solution 目录 下的真实源码index.html、style.css、script.js完整讲解从页面结构搭建、罐子与植物的 CSS 绘制到基于 Pointer Events 与 JavaScript 闭包的拖拽系统实现最后演示如何借助 Azure Static Web Apps 一键把项目发布到公网。读完后你将掌握 DOM 操作、闭包状态管理、事件生命周期以及静态站点部署的完整实战链路。一、项目概览什么是 Terrarium按照 solution README 的描述Terrarium 是一个 small drag and drop code-meditation——一次通过拖拽完成的小型代码冥想。它的技术构成非常克制HTML搭建页面的基础骨架导航、植物选择区、玻璃罐结构CSS绘制并美化整个界面包括玻璃罐的透明质感与页面布局JavaScript为 14 株植物注入拖拽交互让用户可以把植物从两侧的库存区任意拖入罐中布置。整个项目使用纯原生vanilla技术栈不依赖任何框架是 DOM 与闭包课程 的最终配套解决方案。页面加载后用户按住任意一株植物即可拖动松开后植物停留在新位置——这正是很多现代交互看板拖拽、文件上传、相册排序背后的基础原理。背景说明玻璃罐的 CSS 造型灵感来自 Jakub Mandra 在 Codepen 上发布的玻璃罐作品植物插画由课程作者 Jen Looper 使用 Procreate 手绘完成见 solution README 的 Credits 部分。本模块对应的教学路径可参考 Terrarium 课程主页 及其三节子课程HTML 入门、CSS 入门、DOM 与闭包。二、工程结构solution 目录解剖项目解决方案位于3-terrarium/solution/结构非常清晰是一个典型的三件套静态站点3-terrarium/solution/ ├── README.md # 项目说明与部署指南 ├── index.html # 页面结构唯一入口 ├── style.css # 全部样式布局 玻璃罐绘制 ├── script.js # 拖拽交互逻辑闭包 Pointer Events └── images/ ├── plant1.png ~ plant14.png # 14 株手绘植物400x400 PNG三个文件各司其职没有任何构建步骤用浏览器直接打开 index.html 即可运行。这种零依赖、零构建的特性也是它能被 Azure Static Web Apps 一键托管的根本原因。三、从源码看实现三件套如何协同工作3.1 HTML 骨架结构决定一切index.html 承担了全部结构定义页面主体分为三块导航栏nav使用 Font Awesome 图标通过 index.html 中的 CDN 引入font-awesome/6.4.2渲染 Home、Plants、Care Tips、About、Contact 五个入口植物选择区#plant-selection左右两个容器#left-container与#right-container各放置 7 个.plant-holder每个 holder 内是一张带唯一 ID 的植物图片共 14 株div classplant-holder img classplant altplant idplant1 src./images/plant1.png / /div !-- plant2 ~ plant7 位于左容器plant8 ~ plant14 位于右容器 --玻璃罐区#terrarium由jar-top罐口、jar-walls罐壁内含两条高光jar-glossy-long/jar-glossy-short、dirt泥土和jar-bottom罐底四类 div 分层拼出详见 index.html。值得注意的两个设计细节每株植物都有唯一 IDplant1~plant14这是后面 JavaScript 用document.getElementById()精确绑定拖拽逻辑的前提——ID 用于个体定位类名用于批量样式脚本通过script src./script.js defer/script在head中引用defer保证 JavaScript 在 HTML 全部解析完毕后执行避免元素还没准备好就查找的时序错误该知识点在 DOM 与闭包课程 中有专门强调。3.2 CSS 样式用纯 CSS 画出玻璃罐style.css 除了常规布局最精彩的是用层叠定位与透明度画出玻璃质感。核心思路可以拆成三层定位体系.container使用position: absolute钉在页面左右两侧#left-container { left: 0; }、#right-container { right: 0; }宽度 15%、高度 100%形成两条植物货架.plant同样绝对定位并通过z-index: 2保证可被拖动到罐子上层见 style.css罐体层次.jar-walls占罐区 60% 宽、80% 高border-radius: 1rem圆角background: #d1e1df搭配opacity: 0.5呈现半透明玻璃感z-index: 1介于背景与植物之间.jar-top、.jar-bottom、.dirt分别用不同透明度0.7 / 0.7 / 0.7叠出罐口、罐底与泥土z-index: -1的泥土让植物看起来插在土里见 style.css高光细节两条细长圆角白色条.jar-glossy-long宽 3%、高 20%与.jar-glossy-short宽 3%、高 5%模拟玻璃反光background: #ddfbff贴近真实玻璃的高光色。此外style.css 还补充了导航栏渐变背景linear-gradient(90deg, #d1e1df 60%, #b2c9c6 100%)、hover 态过渡动画、页脚样式以及media (max-width: 700px)下导航栏纵向排列的响应式规则——注意这段代码位于.jar-*之后是同一文件内的渐进式增强符合课程先画罐子、再补页面的推进节奏。3.3 JavaScript 拖拽系统闭包 Pointer Eventsscript.js 是整个项目交互的核心其实现思路dragElement 闭包源自 w3schools 的拖拽元素方案文件头部有注释说明。完整代码逻辑如下// 为全部 14 株植物绑定拖拽 dragElement(document.getElementById(plant1)); // ... plant2 ~ plant14 同样处理 function dragElement(terrariumElement) { // 闭包内的私有状态四组坐标 let pos1 0, pos2 0, pos3 0, pos4 0; terrariumElement.onpointerdown pointerDrag; function pointerDrag(e) { e.preventDefault(); // 阻止文本选中等浏览器默认行为 pos3 e.clientX; // 记录按下点的 X pos4 e.clientY; // 记录按下点的 Y document.onpointermove elementDrag; // 移动时持续追踪 document.onpointerup stopElementDrag; // 松开时停止 } function elementDrag(e) { pos1 pos3 - e.clientX; // 水平位移增量 pos2 pos4 - e.clientY; // 垂直位移增量 pos3 e.clientX; // 更新基准点 pos4 e.clientY; terrariumElement.style.top terrariumElement.offsetTop - pos2 px; terrariumElement.style.left terrariumElement.offsetLeft - pos1 px; } function stopElementDrag() { document.onpointerup null; // 清理避免内存泄漏 document.onpointermove null; } }结合 script.js 原文这套系统有三个值得深挖的技术点1. 闭包即私有状态仓。每次调用dragElement(plantN)都会为那一株植物创建一份独立的词法环境pos1~pos4相当于该植物私有的坐标记录。14 次调用产生 14 个互不干扰的闭包实例这正是 DOM 与闭包课程 中每株植物拥有自己的数据记录这一教学目标的代码级落地。2. Pointer Events 一统鼠标与触屏。事件链为onpointerdown按下→document.onpointermove移动→document.onpointerup松开。相比传统onmousedown仅桌面鼠标或onclick无法表达持续拖动Pointer Events 天然兼容鼠标、手指与触控笔。把移动/松开监听挂在document上而非元素自身可保证指针快速移出植物甚至移出浏览器窗口时拖拽仍不中断。3. 坐标数学与事件清理。clientX/clientY是相对视口的坐标elementDrag通过当前位置 - 上一次位置算出增量再用offsetTop/offsetLeft元素相对定位祖先的偏移叠加成新的top/left实现元素跟随指针平滑移动。stopElementDrag将两个 document 级监听置空是防止事件监听器累积导致性能劣化的关键收尾——教学文档特别强调过不清理的后果监听器持续运行、资源浪费、元素行为异常详见 课程第 3 节。3.4 本地运行与体验由于是纯静态项目运行方式零成本直接双击/拖拽 3-terrarium/solution/index.html 到浏览器打开本地文件协议即可无需服务器或者在工作目录下起一个简易静态服务器如python -m http.server后访问对应端口按住任意植物 → 拖动 → 松开即可完成一次布置项目没有设计落点限制用户可以自由发挥创意摆放。四、把项目发布到公网Azure Static Web Apps 部署指南部署是 solution README 明确给出的核心操作流程也是本项目唯一涉及上线的章节。得益于应用无后端 API、无构建脚本的纯静态特性整个部署过程可以在 Azure Static Web Apps 上做到几乎零配置。4.1 三步部署流程按文档指引部署只需三步Fork 本仓库先在平台侧把 Web-Dev-For-Beginners 仓库 Fork 到自己的账号下以获得可写副本点击部署按钮在 solution README 的部署章节中点击 Deploy to Azure 按钮跳转到 Azure 门户的 Static Web Apps 创建向导走完创建向导在向导中重点确认以下配置项——配置项推荐取值说明App root应用根目录/solution或你自己的代码根目录告诉构建服务去哪里找index.htmlAPI 配置跳过本应用没有 API无需配置 Azure Functions 等后端资源构建产物自动仓库 Fork 后会自动生成.github工作流文件夹交给 Azure 构建服务完成构建与发布文档特别说明原文见 solution README 的 Deploy 一节Fork 后仓库里会被创建.github文件夹其中包含的 GitHub Actions 工作流会驱动 Azure Static Web Apps 的构建服务自动把应用编译并发布到一个全新的公开 URL。也就是说你无需手动编写任何 CI/CD 配置只需完成上述三步。4.2 部署原理补充从仓库实际情况看这套流程能够成立的关键在于两点无后端依赖solution 目录 内只有index.html、style.css、script.js与静态图片不存在任何服务端接口调用静态托管即可完整运行——这正是向导中可以安全跳过 API 配置的原因根目录可配置App root指向/solution而非仓库根目录是因为 Terrarium 只是 Web-Dev-For-Beginners 多课程仓库中的一个子项目部署时精确指向子目录即可只发布本项目避免把整个课程仓库全部托管出去。补充说明该部署入口同时出现在 Terrarium 课程主页 的 Deploy 小节两处表述一致可互为印证。五、延展学习从一个拖拽项目出发完成部署后项目本身仍是一片值得继续挖掘的试验田。依据 DOM 与闭包课程 的挑战清单可以在不改动仓库的前提下在自己的 Fork 上尝试以下增强每一个都对应真实的 Web 开发知识点重置功能新增一个按钮点击后通过 CSS transitions 在 1 秒内把所有植物平滑送回两侧容器涉及状态记忆与动画双击置顶双击植物时修改其z-index让它浮到最前涉及样式属性动态写入拖拽边界限制植物不能被拖出罐子区域涉及坐标计算与边界判定位置持久化用localStorage保存植物坐标刷新后恢复布局涉及浏览器存储 API拖放反馈悬停时增加微光效果、拾取/放置时播放音效涉及事件监听与体验优化。这些练习都复用着本文讲解的同一套 DOM 操作、事件处理与状态管理模式是通往看板拖拽、文件上传、图片排序等专业交互方案的必经之路。结语Terrarium 用最简的工程结构1 个 HTML 1 个 CSS 1 个 JS 14 张图片演示了 Web 交互的完整闭环HTML 定义结构、CSS 绘制界面、JavaScript 通过闭包与 Pointer Events 注入生命力最后借助 Azure Static Web Apps 一键抵达公网。无论是作为 Web-Dev-For-Beginners 课程的学习终点还是作为理解 DOM 与闭包的最小可运行范本这个玻璃罐都值得亲手拖一拖、读一读它的三件套源码。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考