如何在JavaScript拖拽API中实现正确拖拽后加1分的计分功能？

第一步：修复HTML中的无效ID #

HTML里的ID不能包含空格，先修正所有带空格的ID，用class标记通用样式，同时添加分数展示区域：

<div id="drop_area">
  <div id="div1" class="drop" ondrop="drop(event);" ondragover="allowDrop(event);" data-value="10000 Years"></div>
  <div id="div2" class="drop" ondrop="drop(event);" ondragover="allowDrop(event);" data-value="Evil Queen"></div>
  <div id="div3" class="drop" ondrop="drop(event);" ondragover="allowDrop(event);" data-value="12"></div>
  <div id="div4" class="drop" ondrop="drop(event);" ondragover="allowDrop(event);" data-value="Nana"></div>
  <div id="div5" class="drop" ondrop="drop(event);" ondragover="allowDrop(event);" data-value="Maurice"></div>
</div>

<div id="drag_options">
  <div id="wrapper">
    <div id="drag1" class="option" draggable="true" ondragstart="drag(event)">Evil Queen</div>
    <div id="drag2" class="option" draggable="true" ondragstart="drag(event)">Maurice</div>
    <div id="drag3" class="option" draggable="true" ondragstart="drag(event)">Nyla</div>
    <div id="drag4" class="option" draggable="true" ondragstart="drag(event)">Cruela Devil</div>
    <div id="drag5" class="option" draggable="true" ondragstart="drag(event)">4</div>
    <div id="drag6" class="option" draggable="true" ondragstart="drag(event)">Moris</div>
    <div id="drag7" class="option" draggable="true" ondragstart="drag(event)">10000 Years</div>
    <div id="drag8" class="option" draggable="true" ondragstart="drag(event)">1000 Years</div>
    <div id="drag9" class="option" draggable="true" ondragstart="drag(event)">12</div>
    <div id="drag10" class="option" draggable="true" ondragstart="drag(event)">Nana</div>
  </div>
</div>

<div id="score_display">总分: <span id="score">0</span></div>

<div id="submit_button">
  <button type="button" id="submit" onclick="submit()">Submit</button>
</div>

注：将按钮type改为button避免默认提交行为，新增score_display区域展示实时分数

第二步：补充拖拽核心函数并实现计分逻辑 #

// 全局维护分数，避免每次调用函数重置状态
let score = 0;
const totalScore = document.getElementById('score');

// 允许放置的基础函数，必须阻止默认行为才能触发drop事件
function allowDrop(event) {
  event.preventDefault();
}

// 拖拽开始时记录被拖拽元素的ID
function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

// 放置时判断条件并执行加分逻辑
function drop(event) {
  event.preventDefault();
  const draggedId = event.dataTransfer.getData("text");
  const dropTargetId = event.target.id;

  // 判断是否是drag1拖拽到div1上
  if (draggedId === "drag1" && dropTargetId === "div1") {
    // 可选：给目标区域标记已放置，避免重复加分
    if (!event.target.classList.contains("dropped")) {
      score += 1;
      totalScore.textContent = score;
      event.target.classList.add("dropped");
    }
  }

  // 可选：将拖拽元素移动到目标区域，增强视觉反馈
  event.target.appendChild(document.getElementById(draggedId));
}

function submit() {
  document.getElementById('handler').style.display = 'block';
  // 提交时可扩展逻辑，比如打印最终分数
  console.log("最终分数:", score);
}

关键说明 #

• 全局分数变量：把score放在函数外部，确保拖拽加分后的状态能持续保留，不会被函数调用重置。
• 拖拽事件核心：allowDrop阻止默认行为是触发drop事件的前提，drag记录被拖拽元素ID，drop里完成条件判断和加分。
• 防重复加分：通过给目标区域添加dropped类，避免同一元素多次拖拽重复加分，不需要的话可以移除这部分逻辑。
• 无效ID修复：原HTML中ID包含空格属于无效语法，浏览器无法正确识别，所以改为ID+class的方式区分元素类型。

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