javascript - JavaScript 中拖放功能的问题

Question

我有一个 JavaScript 拖放代码，

我有两个用于放置的类 div1 和用于拖动的 div2 。

我已经根据viewport width和height在CSS中设置了这两个类的position，并且是强制性的在这里。

问题是，当我将 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来自.div1的CSS ，以及position: relative来自.div2的CSS ，那么拖放操作似乎按预期工作。

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>