Intercettare il drag and drop in Javascript

Mattepuffo's logo
Intercettare il drag and drop in Javascript

Intercettare il drag and drop in Javascript

Programmazione, Javascript - AJAX

Con l'avvento di HTML 5, e con il miglioramento di Javascript stesso, è stato possibile fare molte cose senza l'uso di librerie esterne.

Una di queste è il drag and drop!

In questo articolo vediamo come impostarlo e come intercettare i vari eventi.

Qui sotto avete un esempio in cui racchiudo tutto l'HTML e il Javascript insieme.

C'è anche un pò di CSS per sistemare un pò la pagina:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

        <style>
            section {
                display: flex;
            }

            .console {
                border-left: 3px solid black;
                width: 30vw;
                height: 100vh;
                padding-left: 20px;
            }

            .display {
                width: 70vw;
                height: 100vh;
            }

            .dropzone {
                display: inline-block;
                width: 25%;
                height: 200px;
                margin: 25px 25px 25px 0;
                padding: 10px;
                background-color: black;
            }

            .content {
                width: 100%;
                height: 100%;
                background: red;
            }
        </style>
    </head>
    <body>
        <section>

            <div class="display">
                <h1>Sposta il rosso!</h1>

                <div class="dropzone">
                    <div class="content" draggable="true"></div>
                </div>

                <div class="dropzone"></div>
                <div class="dropzone"></div>
                <div class="dropzone"></div>
            </div>

            <div class="console">
                <h2>Console eventi</h2>
                <div id="drag_start"></div>
                <div id="drag_do"></div>
                <div id="drag_end"></div>
                <div id="drag_over"></div>
                <div id="drag_enter"></div>
                <div id="drag_leave"></div>
                <div id="drop_do"></div>
            </div>
        </section>

        <script>
            const dropzone = document.querySelectorAll(".dropzone");
            const content = document.querySelector(".content");
            let dragstart = 0;
            let drag = 0;
            let dragend = 0;
            let dragover = 0;
            let dragenter = 0;
            let dragleave = 0;
            let drop = 0;

            content.addEventListener("dragstart", (e) => {
                dragstart++;
                drag_start.innerText = `Dragstart: ${dragstart}`;
            });

            content.addEventListener("drag", (e) => {
                drag++;
                drag_do.innerText = `Drag: ${drag}`;
            });

            content.addEventListener("dragend", (e) => {
                dragend++;
                drag_end.innerText = `Dragend: ${dragend}`;
            });

            dropzone.forEach((dropzone) => {
                dropzone.addEventListener("dragenter", (e) => {
                    dragenter++;
                    drag_enter.innerText = `Dragenter:  ${dragenter}`;
                });

                dropzone.addEventListener("dragleave", (e) => {
                    dragleave++;
                    drag_leave.innerText = `Dragleave:  ${dragleave}`;
                });

                dropzone.addEventListener("dragover", (e) => {
                    e.preventDefault();
                    dragover++;
                    drag_over.innerText = `Dragover:  ${dragover}`;
                });

                dropzone.addEventListener("drop", (e) => {
                    drop++;
                    drop_do.innerText = `Drop: ${drop}`;
                    dropzone.append(content);
                });
            });
        </script>

    </body>
</html>

Enjoy!

Condividi

Commentami!