求助：拖拽1-9数字排序正确后显示跳转下一页按钮的实现方法

实现方案 #

你只需要按以下步骤修改现有代码即可实现需求： #

1. 新增跳转按钮HTML

在现有HTML代码的.reset div后面添加跳转按钮，默认隐藏：

<div class="reset">
  <a href=".">Reset</a>
</div>
<!-- 新增下一页按钮 替换href为你的实际跳转地址 -->
<div class="next-page" id="nextBtn" style="display:none;">
  <a href="你的下一页地址">前往下一页</a>
</div>

2. 新增跳转按钮CSS样式

在现有CSS代码末尾添加按钮样式：

.next-page {
  height: 50px;
  width: 150px;
  position: fixed;
  left: 50%;
  top: 110%;
  transform: translate(-50%, -50%);
  background-color: #2d7d46f2;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
  border: 1px solid #d6d6d6;
}
.next-page:hover {
  background-color: #236638f2;
}
.next-page a {
  color: #fff;
}

3. 替换原有JS逻辑

把现有JS代码全部替换为下方代码，已包含放置逻辑、重复放置处理、顺序校验功能：

// 配置项：可自定义预设的正确排列顺序
const CORRECT_SEQUENCE = ['1', '6', '3'];
// 放置位的顺序ID，无需修改
const SLOT_ORDER = ['code-1', 'code-2', 'code-3'];

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  const dragId = ev.dataTransfer.getData("Text");
  const targetSlot = ev.target;
  // 处理放置位已有数字的场景：把原有数字放回初始圆形框
  if (targetSlot.children.length > 0) {
    const existNum = targetSlot.children[0];
    const originBox = document.querySelector(`.picure-${existNum.innerText.trim()}-box`);
    originBox.appendChild(existNum);
  }
  targetSlot.appendChild(document.getElementById(dragId));
  // 每次放置完成后校验顺序
  validateSequence();
}

// 校验当前排列是否符合预设值
function validateSequence() {
  const currentSeq = [];
  for (let slotId of SLOT_ORDER) {
    const slot = document.getElementById(slotId);
    // 任意放置位为空则不触发校验
    if (slot.children.length === 0) return;
    currentSeq.push(slot.children[0].innerText.trim());
  }
  // 顺序匹配则显示跳转按钮
  const isMatch = currentSeq.join('-') === CORRECT_SEQUENCE.join('-');
  document.getElementById('nextBtn').style.display = isMatch ? 'block' : 'none';
}

可自定义调整项

• 修改CORRECT_SEQUENCE数组的值即可更换为你需要的正确顺序
• 调整.next-page的top属性值可以修改跳转按钮的显示位置
• 替换跳转按钮的href属性值为你的实际下一页地址即可实现跳转

内容的提问来源于stack exchange，提问作者Forza