Javascript 拖放：显示可拖动元素，直到验证条件为止

我写了一个函数将一个元素拖放到另一个元素中，这个元素是一个图像，在最终位置拖放后，它会在原始位置重新生成自己

我想重新生成这个图像，直到条件为真，当条件为假时，它会停止在其原始位置重新生成。这是我写的函数，但我无法避免要重新生成的图像。有什么提示吗？提前谢谢

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    if (nPedR > 0){
     ev.target.appendChild(document.getElementById(data).cloneNode(true));
     nPedR--;
    }
    else {
    document.getElementById("Drag1").remove();
    }
    console.log(nPedR);
}

我还发布了HTML代码块：

<tr>
<td width="50px" height="50px"><img id="drag1" src="red.png" align="center" draggable="true" ondragstart="drag(event)"></td>
<td width="50px" height="50px"><img id="drag2" src="yellow.png" align="center" draggable="true" ondragstart="drag(event)"></td>
</tr>

---

有什么想法吗？我被卡住了。。。