我正在设置仪表板。我想创建一些圆形并允许用户在不同的单元格之间拖放它们(我在这里使用 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 以允许文本圆圈在它们之间移动,但是它没有任何结果。 请帮忙
最佳答案
尝试使用 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>
关于javascript - 可拖动元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58074099/