Question

我有两个div框：.box001，.box002。

当我将.box002的{{1}}拖放到另一个id="1"的{{1}}时，拖动的元素也会同时删除div {{1 }}变成.box001，

当我拖放第二个拖动元素时，将id="11"的{{1}}与另一个ondrop的{{1}}-background-color和另一个none与{{1}一起使用到另一个.box002-与id="2"一起使用。div和第一个一样，我无法获得理想的效果，也使.box001到{{1 }}在id="20"中。

如何获得一个完善的工作丢弃周期，以检查.box002和id="3"的{{1}}？

div

box001

id="30"

Answer 1

您需要在i函数之外定义drop。现在，每个放置将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>

第二和第三滴无法在javascript中工作

1 个答案: