JS 拖放：将一个元素放在另一个元素之上会用第一个元素替换 dataTransfer 数据 1) 尝试使用 dropBefore.replaceWith(yourNewChessPiece);2) 你是 Missing the target element Id ，没有设置它，不确定你的 metaData 变量是否有它

问题描述

我正在用 React 编写一个简单的国际象棋游戏，并尝试使用拖放 API 来简化棋子的拖放。一切都按预期工作，除非一件作品捕获另一件作品。例如，如果白车抓到黑兵，白车移动到黑兵之前的位置，黑兵离开棋盘。但是下一次我尝试移动白车时，它移动了被捕获的黑色棋子。

无论使用哪两个部分，此行为都是 100% 一致的。 Piece 1 捕获了piece 2，现在piece 1 的dataTransfer 数据是piece2 的数据。

我已经缩小了范围，我认为问题出在 dataTransfer 对象上。

棋子的dragStart代码

_onDragStart( e ){
    e.dataTransfer.items.clear();
    e.dataTransfer.clearData( "text/plain" );
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.dropEffect = "move";
    e.dataTransfer.setData( "text/plain",JSON.stringify( this.MetaData ) );
}

磁贴放置处理程序的代码

_onDrop( e ){
    this.onDrop({
        index: this.state.index,piece: JSON.parse( e.dataTransfer.getData( "text/plain" ) )
    });
}

解决方法

1) 尝试使用 dropBefore.replaceWith(yourNewChessPiece);

替换旧部分

2) 你是 Missing the target element Id ，没有设置它，不确定你的 metaData 变量是否有它

一些samples

// cache you element/variables to simplify the later
// I think you are missing this,I cant tell what your this.metaData holds
chessPieceToAddToTile = document.getElementById(data),dropBefore = ev.target;

// using childNode.replaceWith() to insert the 
// so,*** REPLACE old piece with your new chessPieceToAddToTile Node
// dropBefore Node:
dropBefore.replaceWith(chessPieceToAddToTile);

---

childNode.replaceWith().... Ref 和 Node.replaceChild().

疑难解答：简化它，以便您可以看到发生了什么，例如在您的拖动处理程序、放置处理程序中

console.log("dragStart: dropEffect = " + ev.dataTransfer.dropEffect + " ; effectAllowed = " + ev.dataTransfer.effectAllowed ; chessPieceToAddToTile... blah blah);