I have two div boxes: .box001 and .box002.
I need to remove the p elements with names name1, name2, and name3 on each drop action.
When I drag and drop a box002 element with id="1" to another div - box001 with id="10", the dragged element should be deleted upon dropping and the background-color should become none. The same should happen when dragging box002 with id="2" to box001 with id="20", as well as for the third box accordingly.
What is the best way to achieve this functionality?
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");
alert(data);
var el = document.getElementById(data);
el.parentNode.removeChild(el); // removing the dragged item
ev.target.style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none
document.getElementsByClassName(ev.target.className).innerHTML = ''; // clear the content of the specific box
}.box001 {
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 10%;
background-color: #42e0fd;
font: "Courier New", Courier, monospace;
font: 70px;
;
color: #001a00;
font-size: xx-small;
font-weight: 900;
text-align: center;
}
.box002 {
float: left;
width: 50px;
height: 50px;
}<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
<p id="11"> name1</p>
</div>
<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="20">
<p id="12">name2</p>
</div>
<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="30">
<p id="13">name3</p>
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="1">
<img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="https://picsum.photos/200/300" draggable="true" id="2" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
<img src="https://picsum.photos/200/300" draggable="true" id="3" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>