JavaScript中的拖放功能问题

Question

我有一个JavaScript拖放代码，

我有两个类div1用于拖放，div2用于拖动。

我已经根据position viewport和width在CSS中设置了这两个类的height，在这里是必须的。

问题是，当我将div2拖放到div1时，元素没有移动并被放置在div1内。

如何使班级div2拖到班级div1内？

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");

  console.log(data);
  assignedTabName = document.getElementById(data).className;
  console.log(assignedTabName);

  ev.target.appendChild(document.getElementById(data));

}

.div1 {
  border: 2px solid black;
  position: absolute;
  width: 23vw;
  height: 10vh;
  left: 10vw;
  bottom: 80vh;
}

.div2 {
  border: 2px solid black;
  position: fixed;
  width: 14vw;
  height: 12vh;
  left: 0vw;
  bottom: 60vh;
  background-color: #FFFF00;
}

<div class="div1" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="div2" id="drag1" draggable="true" ondragstart="drag(event)">
  <p width="336" height="69">hello</p>
</div>

Answer 1

我相信您的div定位规则就是问题所在。如果您从position: absolute的CSS中删除了.div1，并且从position: relative的CSS中删除了.div2，则拖放似乎可以正常工作。 / p>

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");

  console.log(data);
  assignedTabName = document.getElementById(data).className;
  console.log(assignedTabName);

  ev.target.appendChild(document.getElementById(data));

}

.div1 {
  border: 2px solid black;
  width: 23vw;
  height: 10vh;
  left: 10vw;
  bottom: 80vh;
}

.div2 {
  border: 2px solid black;
  width: 14vw;
  height: 12vh;
  left: 0vw;
  bottom: 60vh;
  background-color: #FFFF00;
}

<div class="div1" id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="div2" id="drag1" draggable="true" ondragstart="drag(event)">
  <p width="336" height="69">hello</p>
</div>