如何使多个元素拖放？
Posted
技术标签:
【中文标题】如何使多个元素拖放？【英文标题】：How to make multiple elements drag and drop? 【发布时间】：2022-01-22 10:30:32 【问题描述】：我需要使 3 个元素（嘴巴、左眼、右眼）可拖放到带有背景的 div 上（面部被剪掉）。删除每个元素后，会出现一个文本。
我正在努力实现的目标
可拖动图片与背景大小相同。 我已经尝试了一些东西，但我还没有真正做到：
<!DOCTYPE html>
<html>
<head>
<style>
#div1
width: 1554px;
height: 874px;
border: 1px solid #aaaaaa;
z-index: 1;
#drag1
width: 1554px;
height: 874px;
z-index: 2;
#drag2
width: 1554px;
height: 874px;
z-index: 3;
#drag3
width: 1554px;
height: 874px;
z-index: 4;
</style>
<script>
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));
</script>
</head>
<body>
<div id="div1" style="background-image: url('https://blondtrickster.com/wp-content/uploads/2021/12/BACKGROUND.png');" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://blondtrickster.com/wp-content/uploads/2021/12/SUU.png" draggable="true" ondragstart="drag(event)">
<img id="drag2" src="https://blondtrickster.com/wp-content/uploads/2021/12/SILM_VASAK.png" draggable="true" ondragstart="drag(event)">
<img id="drag3" src="https://blondtrickster.com/wp-content/uploads/2021/12/SILM_PAREM.png" draggable="true" ondragstart="drag(event)">
</body>
</html>
非常感谢您的帮助，因为我是一个初学者。
【问题讨论】：
【参考方案1】：问题在于您的 CSS 规则。现在，当您附加子项时，第二个 IMG 放在第一个下方，因此您必须确保所有 IMG 元素彼此堆叠。我通过设置来做到这一点
"position: absolute; top: 0; left: 0"
在每张图片上。
完整的 CSS：
html,
body
margin: 0;
padding: 0;
#div1
width: 1554px;
height: 874px;
border: 1px solid #aaaaaa;
z-index: 1;
#div1 #drag1
position: absolute;
top: 0;
left: 0;
width: 1554px;
height: 874px;
z-index: 2;
#div1 #drag2
position: absolute;
top: 0;
left: 0;
width: 1554px;
height: 874px;
z-index: 3;
#div1 #drag3
position: absolute;
top: 0;
left: 0;
width: 1554px;
height: 874px;
z-index: 4;
这是我得到的：
【讨论】：
以上是关于如何使多个元素拖放？的主要内容，如果未能解决你的问题，请参考以下文章