javascript - 可拖动元素

Question

我正在设置仪表板。我想创建一些圆形并允许用户在不同的单元格之间拖放它们(我在这里使用 div)我可以从同一个文件夹中拖放图像，但无法在创建的带有文本的圆形上执行此操作

我尝试阅读 W3schools 教育 Material 我认为代码错误源于要传输的数据集，但我不知道要更改什么

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");
  ev.target.appendChild(document.getElementById(data));
}

.circle {
  height: 50px;
  width: 50px;
  background-color: #f05;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  color: #f0f;
}

#div1,
#div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 1px;
  padding: 10px;
  border: 1px solid black;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div class="circle" draggable="true" ondragstart="drag(event)" id="drag1">no.1</div>
</div>

我试图创建两个 div 以允许文本圆圈在它们之间移动，但是它没有任何结果。请帮忙

Answer 1

尝试使用 display:flex;

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");
  ev.target.appendChild(document.getElementById(data));
}

.circle {
  height: 50px;
  width: 50px;
  background-color: #f05;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  color: #f0f;
  margin:0 auto;
}

#div1,
#div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 1px;
  padding: 10px;
  border: 1px solid black;
  display:flex;
  align-items:center;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div class="circle" draggable="true" ondragstart="drag(event)" id="drag1">no.1</div>
</div>