当我将元素拖放到图像上时，如何使图像不可见？

Question

当某些东西被拖放到它上面时，我试图用另一个图像替换一个图像。 这是我当前的代码。

我应该在document.addEventListener("drop", function(event)中添加什么以使图像不可见，并在拖放目标时将其替换为另一个图像？

 /* Events fired on the drag target */ document.addEventListener("dragstart", function(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById("demo").innerHTML = "Started to drag the p element."; event.target.style.opacity = "0.4"; }); document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Finished dragging the p element."; event.target.style.opacity = "1"; }); document.addEventListener("dragenter", function(event) { if (event.target.className == "droptarget") { event.target.style.border = "5px dotted red"; } }); document.addEventListener("dragover", function(event) { event.preventDefault(); }); document.addEventListener("dragleave", function(event) { if (event.target.className == "droptarget") { event.target.style.border = ""; } }); document.addEventListener("drop", function(event) { event.preventDefault(); if (event.target.className == "droptarget") { document.getElementById("demo").style.color = ""; document.getElementByClass("droptarget").style.visibility = 'hidden'; } });

 .dragtarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; }.droptarget { float: left; width: auto; height: auto; margin: 15px; padding: 10px; }

 <p>Drag and drop the p element on the image:</p> <div class="dragtarget"> <p draggable="true" id="dragtarget">Drag me:</p> </div> <div class="droptarget"><img src="https.//images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/49ec1464-d899-400a-b608-c48c76b500d2/ddlby97-f31bd202-49ef-4391-995a-e08a03e9a0f8,jpg/v1/fit/w_150,h_150,q_70.strp/baby_yoda_by_patrickbrown_ddlby97-150?jpg.token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvNDllYzE0NjQtZDg5OS00MDBhLWI2MDgtYzQ4Yzc2YjUwMGQyXC9kZGxieTk3LWYzMWJkMjAyLTQ5ZWYtNDM5MS05OTVhLWUwOGEwM2U5YTBmOC5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.F2FTXKUhT4EtaU-LcDHGU-e6TKzIADYXo3UIRgrv8jU"></div> <p id="demo"></p>

Answer 1

这可能是众多实现之一（假设是一个非常基本的实现）：-

 const mando = new Image(150, 150); mando.src = 'https://starwarsblog.starwars.com/wp-content/uploads/2019/12/the-mandalorian-announce-tall.jpg'; /* Events fired on the drag target */ document.addEventListener("dragstart", function(event) { event.dataTransfer.setData("Text", event.target.id); document.getElementById("demo").innerHTML = "Started to drag the p element."; event.target.style.opacity = "0.4"; }); document.addEventListener("drag", function(event) { document.getElementById("demo").style.color = "red"; }); document.addEventListener("dragend", function(event) { document.getElementById("demo").innerHTML = "Finished dragging the p element."; event.target.style.opacity = "1"; }); document.addEventListener("dragenter", function(event) { if (event.target.className == "droptarget") { event.target.style.border = "5px dotted red"; } }); document.addEventListener("dragover", function(event) { event.preventDefault(); }); document.addEventListener("dragleave", function(event) { if (event.target.className == "droptarget") { event.target.style.border = ""; } }); document.addEventListener("drop", function(event) { event.preventDefault(); const dropTarget = event.target.closest('.droptarget'); if (dropTarget) { document.querySelector("#demo").style.color = ""; event.target.remove(); dropTarget.append(mando); } });

 .dragtarget { float: left; width: 100px; height: 35px; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; }.droptarget { float: left; width: auto; height: auto; margin: 15px; padding: 10px; }

 <p>Drag and drop the p element on the image:</p> <div class="dragtarget"> <p draggable="true" id="dragtarget">Drag me:</p> </div> <div class="droptarget"><img src="https.//images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/49ec1464-d899-400a-b608-c48c76b500d2/ddlby97-f31bd202-49ef-4391-995a-e08a03e9a0f8,jpg/v1/fit/w_150,h_150,q_70.strp/baby_yoda_by_patrickbrown_ddlby97-150?jpg.token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTAwIiwicGF0aCI6IlwvZlwvNDllYzE0NjQtZDg5OS00MDBhLWI2MDgtYzQ4Yzc2YjUwMGQyXC9kZGxieTk3LWYzMWJkMjAyLTQ5ZWYtNDM5MS05OTVhLWUwOGEwM2U5YTBmOC5qcGciLCJ3aWR0aCI6Ijw9OTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.F2FTXKUhT4EtaU-LcDHGU-e6TKzIADYXo3UIRgrv8jU" width='150' height = '150'> </div> <p id="demo"></p>

您的event.target是img元素。 因此，我使用了closest() function 来获取最近的父节点与 class 的droptarget ，然后简单地删除现有的图像（再次event.target ）与预加载的图像。