イメージをドラッグアンドドロップで置き換え

Question

サイドバーを開いてイメージをボックスにドラッグ＆ドロップするシステムがありますが、ドラッグしてイメージをボックスにドラッグして別のイメージを同じボックスにドラッグすると、それはそれを置き換えません。これは私のコードです：

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

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data).cloneNode(true)); 
 
} 
 

 
function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementsByTagName("body")[0].style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementsByTagName("body")[0].style.marginLeft= "0"; 
 
}

#div1, #div2, #div3, #div4 { 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
body { 
 
    transition: margin .5s; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<div id="main"> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Materials</span> 
 
</div> 
 

 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 

 
<a href="#"> 
 

 
    \t <img src="#" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"> 
 

 
    Bricks 
 

 
</a> 
 

 
<a href="#"> 
 

 
\t <img src="#" draggable = "true" ondragstart="drag(event)" id="drag2" width="55" height="55"> 
 

 
    Stone 
 

 
</a> 
 
<a href="#"> 
 

 
    \t <img src="#" draggable = "true" ondragstart="drag(event)" id="drag3" width="55" height="55"> 
 

 
\t Wood 
 

 
    </a> 
 
    <a href="#"> 
 

 
    <img src="#" draggable="true" \t \t \t ondragstart="drag(event)" id="drag4" width="55" height="55"> 
 

 
    Eraser 
 

 
    </a> 
 
</div>

私はこれをどのように修正することができますか？

Answer 1

childがdropzoneに追加された後のイベントターゲットは、dropzoneの代わりにイメージを参照していたので、代わりにイメージを効果的に子に繰り返し追加していました。これを解決する1つの方法は、親Dropzoneを探し、存在する場合は子画像を削除することです。

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

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    var el = ev.target; 
 
    if (!el.classList.contains('dropzone')) { 
 
     el = ev.target.parentNode; 
 
     ev.target.remove(); 
 
    } 
 
    el.appendChild(document.getElementById(data).cloneNode(true)); 
 
} 
 

 
function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementsByTagName("body")[0].style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementsByTagName("body")[0].style.marginLeft= "0"; 
 
}

#div1, #div2, #div3, #div4 { 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
body { 
 
    transition: margin .5s; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<div id="main"> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Materials</span> 
 
</div> 
 

 
<div id="div1" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div2" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div3" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="div4" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
 

 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 

 
<a href="#"> 
 

 
    \t <img src="https://unsplash.it/50/50?image=3 
 
" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"> 
 

 
    Bricks 
 

 
</a> 
 

 
<a href="#"> 
 

 
\t <img src="https://unsplash.it/50/50?image=2 
 
" draggable = "true" ondragstart="drag(event)" id="drag2" width="55" height="55"> 
 

 
    Stone 
 

 
</a> 
 
<a href="#"> 
 

 
    \t <img src="https://unsplash.it/50/50?image=1 
 
" draggable = "true" ondragstart="drag(event)" id="drag3" width="55" height="55"> 
 

 
\t Wood 
 

 
    </a> 
 
    <a href="#"> 
 

 
    <img src="https://unsplash.it/50/50?image=0 
 
" draggable="true" \t \t \t ondragstart="drag(event)" id="drag4" width="55" height="55"> 
 

 
    Eraser 
 

 
    </a> 
 
</div>