For my project, I am working with two div boxes. My goal is to make it so that when I drag and drop box002 into another div box001, the background color of box001 should change to none.
I have attempted to achieve this functionality using jQuery without success. How can I accomplish this task using JavaScript?
In my code, I have set up functions for allowing the drop event, handling the drag event, and executing the drop action. However, I am struggling with changing the background color dynamically.
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 = document.getElementById(data);
el.parentNode.removeChild(el);
}.box001 {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
border-radius: 10%;
background-color: #42e0fd;
}
.box002 {
float: left;
width: 50px;
height: 50px;
margin: -50px;
right: 20px;
float: left;
bottom: 0;
left: 0;
margin-bottom: 20px;
}<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="background-color: #42e0fd;">
<p>8:30</p>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)">
<img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>