Click here for free DL of the app version that can save data.

No:48389

104

←

Prev Next

→

Create an drag an drop with event.dataTransfer.eff..ALL
Developer User20383｜Date and time 24/3/2 1:56:04
Build time 9.291 sec｜Game capacity 1.576KB｜

Script

Juego de arrastrar y soltar pictogramas

🌞

🌙

Arrastra y suelta aquí

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de arrastrar y soltar</title>
<style>
  #contenedor {
    display: flex;
    justify-content: space-around;
    margin: 20px;
  }

.item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid black;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
  }

#dropzone {
    width: 200px;
    height: 200px;
    background-color: lightgray;
    border: 2px dashed black;
    text-align: center;
    line-height: 200px;
    font-size: 20px;
  }
</style>
</head>
<body>
<h1>Juego de arrastrar y soltar pictogramas</h1>

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">Arrastra y suelta aquí</div>

function drag(event) {
    event.dataTransfer.setData("text", event.target.innerText);
    event.dataTransfer.dropEffect = "copy";
  }

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
   var elem = document.getElementById( data );
    event.target.appendChild(  elem );
  }

let items = document.querySelectorAll('.item');

items.forEach(item => {
    item.addEventListener('dragstart', drag);
  });
</script>
</body>
</html>