Crear 2 layouts horizontales, agregar 2 botones en el primer layout, y hacer un drap and drop en los dos botones y soltar el botón en el segundo layout o viceversa.'s game

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

No:47115

←

Prev Next

→

Crear 2 layouts horizontales, agregar 2 botones en..ALL
Developer User20383｜Date and time 24/2/27 8:43:29
Build time 5.692 sec｜Game capacity 1.498KB｜

Script

Boton 1

Boton 2

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Juego de Drag and Drop</title>
<style>
    .layout {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 200px;
    }

.boton {
        width: 100px;
        height: 50px;
        background-color: #3498db;
        color: #fff;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="layout" id="layout1">
    <div class="boton" id="boton1" draggable="true">Boton 1</div>
    <div class="boton" id="boton2" draggable="true">Boton 2</div>
</div>

boton1.addEventListener('dragstart', dragStart);
    boton2.addEventListener('dragstart', dragStart);

layout2.addEventListener('dragover', dragOver);
    layout2.addEventListener('drop', drop);

function dragStart(event) {
        event.dataTransfer.setData('text/plain', event.target.id);
    }

function dragOver(event) {
        event.preventDefault();
    }

function drop(event) {
        event.preventDefault();
        const id = event.dataTransfer.getData('text');

const elemento = document.getElementById(id);
        layout2.appendChild(elemento);
    }
</script>
</body>
</html>