第二和第三拖动无法在javascript中工作

Question

有两个div框。 box001，box002

当我将box002拖放到另一个div box001时，它被删除，而box002元素和内容被删除，当我将第二个box002拖放到第二个box001时，它不起作用。

我该如何实现？

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);
    document.getElementsByClassName('box001')[0].style.backgroundColor = 'initial';
    document.getElementById('11').innerHTML = '';
    var x=document.getElementById(data).id;
    var y=document.getElementsByClassName('box001')[0];
}

.box001 {
    float: left;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 10%;
    background-color: #ff0000;
}

.box002 {
    width: 50px;
    height: 50px;
    margin: -50px;
    top: 76px;
    float: left;
    position: absolute;
    left: 217px;
}

<div class="box001" ondrop="drop(event)"    ondragover="allowDrop(event)" id="10"><p id="11"> 8:30</p></div>
<div class="box001" ondrop="drop(event)"    ondragover="allowDrop(event)" id="20" ><p id="12">12:25</p></div>
<div class="box001" ondrop="drop(event)"    ondragover="allowDrop(event)" id="30" ><p>01:00</p></div>

<div class="box002" draggable="true" ondragstart="drag(event)" id="11">
    <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="21">
    <img src="https://picsum.photo/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="31">
    <img src="https://picsum.photo/200/300"  draggable="true" id="3" style="width:50px; height:50px; border-radius: 50%;" border="rounded"/>
</div>