I want to drag #nisip and #ciment in #betoniera then to run a function like to reset #betoniera, create another #ciment and #nisip... Can you help me? I want to create a little game, drag 2 elements in one then create another 2 elements...
<!DOCTYPE html>
<html>
<head>
<Style> body{background-color: black;}
#betoniera{
background-color:yellow;
width:100px;
height:100px;
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%,-50%);
}
#nisip{
background-color: gray;
width: 15px;
height: 15px;
position: absolute;
top:35%;
transform:translate(-50%,-50%);
}
#ciment{
background-color: gray;
width: 15px;
height: 15px;
position: absolute;
top:85%;
transform:translate(-50%,-50%);
}
</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="betoniera" draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="nisip" draggable="true" ondragover="allowDrop(event)" ondragstart="drag(event)"></div>
<div id="ciment" draggable="true" ondragover="allowDrop(event)" ondragstart="drag(event)"> </div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire