How do I change the background color of an element on drop with JavaScript

Issue

I am making somekind of a sprintboard and I would like to change the background color of my box depending on which container is it in (toDo, inProgress, Done). I cannot think of a solution, I have tried some but failed, and the other resources I have found were not so helpful.
This is my code, the whole code (just for the purpose of easier understanding):
I need an javascript solution, the point is, when you run the code all the boxes should be gray. But upon dragging and dropping to a different container the background color of the box should change, depending on which container is it in, inProgress = orange, Done = green and toDo should remain gray.

let emptyCell = "cell4";

function boxOver(event) {
  event.preventDefault();
}

function boxDrag(event, boxNumber) {
  event.dataTransfer.setData("text", boxNumber.toString());
}

function boxDrop(event, cellNumber) {
  event.preventDefault();
  let boxNumber = event.dataTransfer.getData("text");

  let draggedBox = document.getElementById("box" + boxNumber);
  let targetCell = document.getElementById("cell" + cellNumber);

  if (targetCell.innerHTML.trim() === "") {
    emptyCell = draggedBox.parentNode.id;
    targetCell.appendChild(draggedBox);
  }
}
.container {
  width: 1000px;
  margin: 0 auto;
  display: flex;
}

#div1 {
  background-color: gray;
  float: left;
  height: 750px;
  width: 300px;
  text-align: center;
  position: relative;
}

#div2 {
  background-color: gray;
  float: left;
  margin-left: 20px;
  height: 750px;
  width: 300px;
  text-align: center;
}

#div3 {
  background-color: gray;
  float: right;
  margin-left: 20px;
  height: 750px;
  width: 300px;
  text-align: center;
}

.text1 {
  background-color: black;
  color: white;
  text-align: center;
  font-size: 40px;
  width: 250px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}

.text2 {
  background-color: orange;
  color: white;
  text-align: center;
  font-size: 40px;
  width: 250px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}

.text3 {
  background-color: green;
  color: white;
  text-align: center;
  font-size: 40px;
  width: 250px;
  height: 50px;
  margin: 0 auto;
  position: relative;
}

#box1 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box2 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box3 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box4 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#box5 {
  background-color: rgb(80, 80, 80);
  color: white;
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  border: 5px solid white;
  border-style: dashed;
}

#cell1 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell2 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell3 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell4 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell5 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell6 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell7 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell8 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell9 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell10 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell11 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell12 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell13 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell14 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

#cell15 {
  text-align: center;
  font-size: 40px;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
<div class="container">
  <div id="div1">
    <div class="text1">To Do</div><br>
    <div id="cell1" ondragover="boxOver(event)" ondrop="boxDrop(event, 1)">
      <div id="box1" draggable="true" ondragstart="boxDrag(event, 1)">#1</div>
    </div>
    <div id="cell2" ondragover="boxOver(event)" ondrop="boxDrop(event, 2)">
      <div id="box2" draggable="true" ondragstart="boxDrag(event, 2)">#2</div>
    </div>
    <div id="cell3" ondragover="boxOver(event)" ondrop="boxDrop(event, 3)">
      <div id="box3" draggable="true" ondragstart="boxDrag(event, 3)">#3</div>
    </div>
    <div id="cell4" ondragover="boxOver(event)" ondrop="boxDrop(event, 4)"></div>
    <div id="cell5" ondragover="boxOver(event)" ondrop="boxDrop(event, 5)"></div>
  </div>
  <div id="div2">
    <div class="text2">In Progress</div><br>
    <div id="cell6" ondragover="boxOver(event)" ondrop="boxDrop(event, 6)">
      <div id="box4" draggable="true" ondragstart="boxDrag(event, 4)">#4</div>
    </div>
    <div id="cell7" ondragover="boxOver(event)" ondrop="boxDrop(event, 7)">
      <div id="box5" draggable="true" ondragstart="boxDrag(event, 5)">#5</div>
    </div>
    <div id="cell8" ondragover="boxOver(event)" ondrop="boxDrop(event, 8)"></div>
    <div id="cell9" ondragover="boxOver(event)" ondrop="boxDrop(event, 9)"></div>
    <div id="cell10" ondragover="boxOver(event)" ondrop="boxDrop(event, 10)"></div>
  </div>
  <div id="div3">
    <div class="text3">Done</div><br>
    <div id="cell11" ondragover="boxOver(event)" ondrop="boxDrop(event, 11)"></div>
    <div id="cell12" ondragover="boxOver(event)" ondrop="boxDrop(event, 12)"></div>
    <div id="cell13" ondragover="boxOver(event)" ondrop="boxDrop(event, 13)"></div>
    <div id="cell14" ondragover="boxOver(event)" ondrop="boxDrop(event, 14)"></div>
    <div id="cell15" ondragover="boxOver(event)" ondrop="boxDrop(event, 15)"></div>
  </div>
</div>

Solution

CSS Solution

#div1 .box {
  background: black;
}

#div2 .box {
  background: orange;
}

#div3 .box {
  background: green;
}

This will set the background colour of every instance of class "box" inside of #div1, #div2 and #div3 to the colour of choice

Just make sure to give each box the class="box" in your HTML

Javascript Solution

if(draggedBox.parentElement.parentElement.id == "div1") {
    draggedBox.style.background = "black"
  } else  if(draggedBox.parentElement.parentElement.id == "div2") {
    draggedBox.style.background = "orange"
  } else  if(draggedBox.parentElement.parentElement.id == "div3") {
    draggedBox.style.background = "green"
  }

Add this code to the end of your boxDrop function so the function looks like this:

function boxDrop(event, cellNumber) {
  event.preventDefault();
  let boxNumber = event.dataTransfer.getData("text");

  let draggedBox = document.getElementById("box" + boxNumber);
  let targetCell = document.getElementById("cell" + cellNumber);

  if (targetCell.innerHTML.trim() === "") {
    emptyCell = draggedBox.parentNode.id;
    targetCell.appendChild(draggedBox);
  }
  
  if(draggedBox.parentElement.parentElement.id == "div1") {
    draggedBox.style.background = "black"
  } else  if(draggedBox.parentElement.parentElement.id == "div2") {
    draggedBox.style.background = "orange"
  } else  if(draggedBox.parentElement.parentElement.id == "div3") {
    draggedBox.style.background = "green"
  }
 
}

.parentElement.id will give you the id of the parent element, which is the column the box is in. So comparing the columns ID in the if statement, you know what colour to set the background.

Answered By – Burnsy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published