How can I make an image invisible when I drag and drop an element on it?

Question

I am trying to replace an image with another image when something is dragged and dropped on it. This is my current code.

What should I add in the document.addEventListener("drop", function(event) to make the image invisible, and replace it with another image when the dragtarget is dropped on it?

/* 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>

Lakshya Thakur · Accepted Answer · 2021-02-11T17:45:57.447

This could be one of the many implementations (let's say a very basic one) :-

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>

Your event.target is the img element. So I have used the closest() function to get the nearest parent node with class of droptarget and then simply removed the existing image (again event.target) with a preloaded image.

How can I make an image invisible when I drag and drop an element on it?

1 Answers1