Ambas imágenes están destinadas a ser arrastradas al div del leftbox . cuando arrastra la imagen azul, que aparece encima de la imagen naranja. Cae con éxito en el leftbox de la izquierda. Cuando arrastra la imagen naranja al destino de colocación, la imagen azul la reemplaza una vez que se coloca. Esto se debe a que aparece arriba de la imagen naranja. Probé esto intercambiando las órdenes de código. Poniendo la imagen naranja primero. Y la imagen naranja era entonces la única receptora del excremento. Cualquier ayuda es apreciada.
function allowdrag(e) { e.preventDefault(); } function Drop(e) { e.preventDefault(); var texts = e.dataTransfer.getData('image/png') var data = document.getElementById(texts); e.target.appendChild(data) } function drog(e) { e.dataTransfer.setData('image/png', e.target.id) } #leftbox { width: 20%; height: 175px; border: 5px solid grey; border-radius: 0px; padding: 0px; margin: 75px 15px 0px 100px; display: inline-block; background-color: white; position: relative; } #image1 { height: 175px; width: 138px; display: table; margin-bottom: 75px; display: inline-block } #reset { height: 0; width: 21%; padding-bottom: 18%; position: absolute; right: 0px; background-image: url(https://win-conditions.com/wp-content/uploads/2021/12/download-1.png); background-size: 100%; background-repeat: no-repeat; } <div id="leftbox" ondrop="Drop(event)" ondragover="allowdrag(event)"> <button id="reset" type="button"></button> </div> <div id="image"> <img id="image1" src="https://win-conditions.com/wp-content/uploads/2021/11/electrospirit.png" draggable="true" ondragstart="drog(event)"> <img id="image1" src="https://win-conditions.com/wp-content/uploads/2021/11/fire_spirits-1.png" draggable="true" ondragstart="drog(event)"> </div>JSFiddle: https://jsfiddle.net/0h7c45kj/1/
Tus imágenes deben tener ID diferentes:
<img id="image1" ... > <img id="image2" ... >