イメージを別のイメージにドラッグしてイメージを変更するにはどうすればよいですか？

Question

画像Bを画像Bにドラッグして、画像Aを画像Bに変更しようとしています。 1枚の写真で作業していますが、複数の写真で作業したいのです。 This image kind of pictures what I want to do.私はJSでこれまで持って何

：

function movePlayer1() { 
 
    if (document.getElementById("pack")) { 
 
     document.getElementById("spot1").src = "image/" + playerImg1; 
 
    } else { 
 
     document.getElementById("spot1").src = "image/" + playerImg2; 
 
    } 
 
} 
 
document.querySelectorAll("img#spot1")[0].addEventListener("dragover", movePlayer1);

私はJavascriptに新しいですが、私は複数のものを試してみましたし、これを実行する方法を見つけ出すことができなかったので、私は誰かがこれを手伝ってくれることを願っています。余分な情報を提供する必要がある場合は、私に知らせてください！

（私はのdocument.getElementByIdオーバー "playerImg2"（ "パック"）をドラッグすると、それはまだ代わりに "playerImg2" の "playerImg1" に変わります。）

感謝。

Answer 1

は、あなたのドロップ可能エリアについて
を背景画像を使用して、あなたのイメージのdraggabilityで遊ぶ：あなたはF12を打ったとき、コンソールには何のエラー

const isClass = (cl, el) => el.classList.contains(cl); 
 
const on = (typ, el, cb) => el.addEventListener(typ, cb); 
 
let dragEl; 
 

 
on("dragover", document, (e) => e.preventDefault()); 
 
on("dragend", document, (e) => e.target.style.opacity = 1); 
 
on("dragstart", document, (e) => { 
 
    dragEl = e.target; 
 
    e.target.style.opacity = 0; 
 
}); 
 
on("drop", document, (e) => { 
 
    e.preventDefault(); 
 
    if(isClass("dropArea", e.target)) { 
 
    dragEl.remove(); 
 
    e.target.append(dragEl); 
 
    } 
 
});

.dropArea { 
 
    display:inline-block; vertical-align:middle; 
 
    width: 57px; height: 87px; margin: 8px; 
 
    background: url('https://i.stack.imgur.com/5nsDs.png') no-repeat 50% 50%/cover; 
 
} 
 
.dropArea.small{ 
 
    width: 30px; height: 40px; 
 
} 
 
.dropArea img{ 
 
    width: 100%; height: 100%; 
 
    transition: 0.3s; 
 
}

<div class="dropArea"><img src="https://i.stack.imgur.com/sBQ1c.png" draggable="true"></div> 
 
<div class="dropArea"><img src="https://i.stack.imgur.com/kR6MI.png" draggable="true"></div> 
 
<div class="dropArea"><img src="https://i.stack.imgur.com/XSBBq.png" draggable="true"></div> 
 
<div class="dropArea small"></div> 
 
<div class="dropArea small"></div> 
 
<div class="dropArea small"></div>