javascript - 第二个和第三个下降在 javascript 中不起作用

Question

我有两个 div 框:.box001、.box002。

当我将带有 id="1" 的 .box002 拖放到另一个 div - .box001使用 id="11" 拖动元素删除 ondrop 同时 background-color 变为 none,

当我将带有 id="2" 的第二个拖动元素 .box002 拖放到另一个 div - .box001 为 id="20"，另一个 .box002 为 id="3" 到另一个 div - .box001 with id="30" 我不能像第一个那样得到想要的效果，也制作 background-color到 .box002 中的 none。

我如何获得一个完美的工作下降周期来检查 .box001 和 .box002 的 id？

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  var i = 0;
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  alert(data);
  var el = document.getElementById(data);

  el.parentNode.removeChild(el); // deleting drag item

  document.getElementsByClassName('box001')[i].style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none
  document.getElementById('11').innerHTML = ''; // which box p  should blank 
  i = i + 1;;
}

.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: #FFFFFF;
  font-size: xx-small;
  font-weight: 900;
  text-align: center;
}

.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">
  <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 id="13">01:00</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>

Answer 1

您需要在drop 函数之外定义i。现在，每次掉落都将 i 设置为 0，因此每次您都会影响相同的 div。

var i = 0;

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); // deleting drag item

  document.getElementsByClassName('box001')[i].style.backgroundColor = 'initial'; //[value indicate which box elemenet] bgcoclor none
  document.getElementById('11').innerHTML = ''; // which box p  should blank 
  i = i + 1;;
}

//.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: #FFFFFF;
  font-size: xx-small;
  font-weight: 900;
  text-align: center;
}

.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">
  <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 id="13">01:00</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>