0
274
ViewsHow to make multiple elements drag and drop?
What I need is to make the 3 elements (mouth, left eye, right eye) draggable and droppable on the div with the background (face cut out). After the drop of each element, a text appears.
What I'm trying to achieve
The draggable pictures are the same size as the background. I have tried something but I haven't really got anywhere:
<!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>
Help would be much appreciated, since I'm a total beginner.
·
Juan Pablo Isaza
1 answers
Answer question0
The issue is with your CSS rules. Right now when you append child, second IMG is placed under the first so you have to make sure that all IMG elements are stacked over one another. I did this by setting
"position: absolute; top: 0; left: 0"
on each image.
Complete 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;
}
This is what I got:
·
Juan Pablo Isaza
Report
Answer question