如何使用JavaScript实现将棋子拖拽放置到现有绿点图像上方

根因分析 #

你遇到的棋子消失问题本质是两个原因叠加导致的：

• 绿点是<img>元素，默认会接收鼠标事件，你拖拽棋子到绿点上时，drop事件的event.target实际是绿点元素，而非你绑定事件的外层格子<div>
• <img>是替换元素，不支持挂载子节点，你尝试把棋子append到绿点上的操作会被浏览器直接忽略，棋子没有被正确插入DOM，所以就消失了

修复方案 #

方案1（最简单，无需改JS逻辑） #

给绿点元素加CSS属性，让它不接收任何鼠标事件，事件会直接透传到外层的格子div：

/* 你的绿点通用选择器，和你原来设置display:none的选择器保持一致即可 */
.empty_squares5 img {
    pointer-events: none;
    /* 保留你原来的display: none等其他样式 */
}

这个方案改动最小，直接就能适配你现有的JS逻辑。

方案2（修改JS逻辑，兼容性更强） #

调整拖放逻辑，强制获取外层的格子容器作为操作目标，避免target指向绿点：

// 新增辅助函数：查找最近的格子父容器
function getParentSquare(el) {
    while (el && !el.className.match(/(empty_squares|empty_squares5|seventh_squares)/)) {
        el = el.parentElement;
    }
    return el;
}

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

function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
}
  
function drop(event) {
    event.preventDefault();
    // 强制获取外层格子作为目标
    const targetSquare = getParentSquare(event.target);
    if (!targetSquare) return;

    const data = event.dataTransfer.getData("text");
    const originPawn = document.getElementById(data);
    const newPawn = originPawn.cloneNode(true);

    clearChildren(targetSquare);
    targetSquare.appendChild(newPawn);
    // 清空原位置的棋子
    clearChildren(originPawn.parentElement);
    // 拖放完成后隐藏所有绿点，恢复界面状态
    document.querySelectorAll('.empty_squares5 img').forEach(dot => dot.style.display = 'none');
}

function clearChildren(el) {
    while (el.firstChild) {
      el.removeChild(el.firstChild);
    }  
}

两种方案任选其一即可解决棋子消失的问题。

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