document.body.onload = function() {
var monsterDiv = document.getElementById("monsterDiv");
var partsDiv = document.getElementById("partsDiv");
var parts = partsDiv.getElementsByTagName("img");
var monsters = monsterDiv.getElementsByTagName("img");
var itemIndex = 0;
var xDistance = 0;
var yDistance = 0;
var foo = null;
for (var i = 0; i < parts.length; i++) {
parts[i].addEventListener("dragstart", dragstartFx, false);
}
function dragstartFx(event) {
event.dataTransfer.setData("text", event.target.id);
event.dataTransfer.effectAllow = "move";
if (event.target.style.top === "") {
partsDiv.style.backgroundColor = "rgba(255,255,255,0.04)";
}
xDistance = event.clientX - event.target.offsetLeft;
yDistance = event.clientY - event.target.offsetTop;
}
for (i = 0; i < monsters.length; i++) {
monsters[i].addEventListener("dragenter", dragenterFx, false);
}
function dragenterFx(event) {
event.target.classList.toggle("active");
}
document.body.ondragover = function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
};
document.body.ondrop = function(event) {
event.preventDefault();
if (event.target.parentNode === monsterDiv) {
event.target.classList.toggle("active");
}
var data = event.dataTransfer.getData("text");
var itemMove = document.getElementById(data);
partsDiv.style.backgroundColor = "rgba(255,255,255,0.31)";
itemMove.className = "itemMove";
itemMove.style.top = event.clientY - yDistance + "px";
itemMove.style.left = event.clientX - xDistance + "px";
itemMove.style.zIndex = itemIndex + 1;
itemIndex = Number(itemMove.style.zIndex);
};
var heightPartsDiv = window.getComputedStyle(partsDiv).height;
partsDiv.style.height = heightPartsDiv;
};
document.getElementsByClassName("btn")[0].onclick = function(e) {
history.go(0);
};
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<div id="wrapper">
<header>
<h2>Haz tus propios monstruos espantosos</h2>
<p>Haz clic y arrastra las diferentes formas para hacer Monstruos de miedo</p>
</header>
<div id="partsDiv">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/oci1.png" id="oci1" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/oci3.png" id="oci3" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/oci4.png" id="oci4" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/oci5.png" id="oci5" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/oci6.png" id="oci6" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/oci8.png" id="oci8" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/oci2.png" id="oci2" alt=""><br>
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/naocare.png" id="naocare" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/naocare2.png" id="naocare2" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/usta1.png" id="usta1" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/usta2.png" id="usta2" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/usta4.png" id="usta4" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/usta5.png" id="usta5" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/usta6.png" id="usta6" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/usta7.png" id="usta7" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/usta8.png" id="usta8" alt=""><br>
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/masna.png" id="masna" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/rogovi.png" id="rogovi" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/rogovi2.png" id="rogovi2" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/sesir.png" id="sesir" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291346/monters/kosa.png" id="kosa" alt="">
</div>
<div id="monsterDiv">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291340/monters/monster3.png" id="monster1" draggable="false" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291338/monters/monster2.png" id="monster2" draggable="false" alt="">
<img src="https://res.cloudinary.com/dtvy1jqj0/image/upload/v1549291342/monters/monster4.png" id="monster3" draggable="false" alt="">
</div>
<input type="button" class="btn" value="Reset">
</div>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgba(87, 190, 255, 1.00);
background-image: url(photos/blue_bubbles_2-wallpaper-1280x1024%20-%20Copy.jpg);
background-size: cover;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#wrapper {
margin: 0 auto;
width: 80%;
user-select: none;
}
header {
margin: 0 auto;
text-align:center;
}
header h2 {
margin-top: 50px;
font: normal 38px/1 "Finger Paint", Helvetica, sans-serif;
color: rgba(55, 55, 55, 1.00);
text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.5);
}
header p {
padding: 20px 0;
font-size: 18px;
color: #901d7e;
}
#partsDiv {
border: 1px solid white;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.31);
padding: 10px;
margin-bottom: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: space-around;
overflow: hidden;
}
#partsDiv img {
cursor: pointer;
flex: 0 1 auto;
}
#monsterDiv {
border: 1px solid white;
padding-top:40px ;
border-radius: 10px;
text-align: center;
position: relative;
}
#monsterDiv img {
margin: 0 4%;
z-index: -1;
transition: transform .2s;
}
.itemMove {
position: absolute;
}
.btn {
float: right;
outline: none;
border: 1px solid #fff;
padding: 10px 20px 10px 20px;
margin: 20px 0;
background-color: #901d7e;
border-radius: 10px;
color: #ffffff;
font-size: 16px;
transition: background-color .2s;
}
.btn:hover {
background-color: #1858af;
}
.active {
transform: rotate(2deg);
transition: transform .2s;
}