我有两个div框。 box001
,box002
当我将box002
拖放到另一个div box001
时,boxoo1
的颜色应该和p元素变为无。当我将第二个box002
拖到第二个box00
1时,它不起作用。
如何获得检查box001
和box002
的ID的完美工作下降周期?
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: #73e600;
}
.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>