Question

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

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

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>

可拖动元素

1 个答案: