蓝桥杯练习——拼出一个未来

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

目标

完善 js/index.js 的 TODO 部分，实现以下目标：

1. 将拖动的拼图块与目标拼图块的图片进行交换，这包括交换图片的 src 属性和 data-id 属性。待补充代码的 drop 函数中现有的两个变量解释如下：draggedPiece：代表被拖动的拼图块的图片元素的父元素。this：代表当前目标位置的拼图块的图片元素父元素。

拼图成功后的 DOM 如下，图片 src、alt、data-id 均按照 1-9 顺序排列

<div class="puzzle-container" id="puzzle-container"><div class="puzzle-piece" draggable="true"><img src="./images/img1.png"  data-id="1" /></div><div class="puzzle-piece" draggable="true"><img src="./images/img2.png"  data-id="2" /></div><!-- ... 省略部分代码 --><div class="puzzle-piece" draggable="true"><img src="./images/img9.png"  data-id="9" /></div>
</div>

1. 显示/隐藏成功消息：拼图成功则设置成功消息元素（id=success-message）的 class 名为 show，否则该元素的 class 名为 hide。（注意：成功消息元素同时有且只能有一个 class 名）

完成后效果如下：

题解 

// 定义拖放事件的处理函数
function drop(event) {// 检查是否拖动的拼图块不是当前目标拼图块// draggedPiece 被拖动的拼图块元素。this 目标位置的拼图块元素。if (draggedPiece !== this) {console.log(draggedPiece);console.log(this);// TODO：待补充代码// 交换拼图块图片和数据 IDconst curImg = this.querySelector("img");const draggedImg = draggedPiece.querySelector("img");[curImg.src, draggedImg.src] = [draggedImg.src, curImg.src];[curImg.dataset.id, draggedImg.dataset.id] = [draggedImg.dataset.id,curImg.dataset.id,];// 检查拼图是否完全正确const puzzles = document.querySelectorAll(".puzzle-piece img");const isValid = Array.from(puzzles).every((img, index) => parseInt(img.dataset.id) === index + 1);successMessage.className = isValid ? "show" : "hide";}