用拖放替换图像

Question

I have a drag and drop system where you open the sidebar and drag an image over into a box, but when you drag and image to a box, and then drag another image to the same box, it doesn't replace it. This is my code:

 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 { 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="#"> <img src="#" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"> Bricks </a> <a href="#"> <img src="#" draggable = "true" ondragstart="drag(event)" id="drag2" width="55" height="55"> Stone </a> <a href="#"> <img src="#" draggable = "true" ondragstart="drag(event)" id="drag3" width="55" height="55"> Wood </a> <a href="#"> <img src="#" draggable="true" ondragstart="drag(event)" id="drag4" width="55" height="55"> Eraser </a> </div> 

How can I fix this?

Answer 1

The event target after a child was appended to the dropzone was referencing the image instead of the dropzone, so you were effectively appending the image to the child repeatedly instead. One way of solving this is to look for the parent dropzone and remove child images if present.

 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 { 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="#"> <img src="https://unsplash.it/50/50?image=3 " draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"> Bricks </a> <a href="#"> <img src="https://unsplash.it/50/50?image=2 " draggable = "true" ondragstart="drag(event)" id="drag2" width="55" height="55"> Stone </a> <a href="#"> <img src="https://unsplash.it/50/50?image=1 " draggable = "true" ondragstart="drag(event)" id="drag3" width="55" height="55"> Wood </a> <a href="#"> <img src="https://unsplash.it/50/50?image=0 " draggable="true" ondragstart="drag(event)" id="drag4" width="55" height="55"> Eraser </a> </div>