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

选中 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：待补充代码
    // 交换拼图块图片和数据 ID
    const 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";
  }