Drag & Drop API | JavaScript

Halo! Materi hari ini saya mempelajari tentang drag and drop API dalam HTML. Cara kerja fitur ini adalah dengan menyeretkan suatu objek dan meletakkannya di tempat lain, seperti pada dalam <div>. Fitur ini biasanya digunakan untuk mengunggah file, membuat list tugas interaktif, membuat interface interaktif, dan lain-lain.

Sebelum kita membuat drag and drop-nya, kita harus membuat target dan objek yang akan diseret. Caranya adalah dengan membuat <div> yang untuk targetnya. Untuk objeknya sendiri, kita bisa menggunakan teks ataupun gambar, tetapi untuk artikel ini akan menggunakan gambar. Setelah itu, tambahkan atribut id, ondrop="drop(event)", dan ondragover="allowDrop(event)" pada elemen <div>. Kemudian untuk element <img> atau <p>, tambahkan atribut id, draggable="true", dan ondragstart="drag(event)" serta src untuk <img>.

Selanjutnya adalah JavaScript-nya. Pertama, kita membuat fungsi allowDrop(event) dengan argumen event. Di fungsi ini, kita akan membuatnya supaya tidak akan menjalan aksi default-nya. Jadi pada fungsi ini kita akan menulis event.preventDefault().

Kedua, kita membuat fungsi drag(event). Di sini kita akan menyiapkan data untuk dikirim ke targetnya. Pada fungsi ini akan ditulis event.dataTransfer.setData("text", event.target.id), di mana pada properti dataTransfer, data akan diformatkan menjadi teks dan ditujukan ke event.target.id dalam setData().

Ketiga, adalah fungsi drop(event). Pada fungsi ini, kita akan menghentikan aksi default-nya dengan event.preventDefault(). Selanjutnya, kita membuat variabel data yang diisi dengan event.dataTransfer.getData("text"). Metode ini akan mengambil data dari setData() tadi. Seterusnya, akan menambah data tersebut pada target <div> dengan menulis event.target.appendChild(document.getElementById(data)). Baris ini akan menambah data sebagai "anak" pada target <div>.

Sekarang drag and drop-nya sudah selesai, tinggal diuji saja programmannya. Itu saja untuk materi drag and drop, jumpa lagi di materi berikutnya!

Project Source Code

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag & Drop</title>
    <style>
        body {
            background-color: rgb(255, 81, 148);
            display: flex;
            justify-content: center;
            margin: 10px auto;
        }
        .image-container {
            align-content: center;
            background-color: rgb(131, 25, 152);
            border: 1px solid black;
            display: block;
            flex-direction: row;
            height: auto;
            justify-content: center;
            padding: 2%;
            width: 50%;
        }
        .header {
            color: white;
            text-align: center;
        }
        .image-row {
            display: flex;
            justify-content: center;
        }
        .image-group {
            background-color: rgb(150, 150, 150);
            border: 1px solid black;
            height: 230px;
            margin: 2%;
            width: 230px;
        }
        .image {
            height: 230px;
            width: 230px;
        }
        .button-group {
            display: flex;
            justify-content: center;
        }
        .button {
            font-size: 1.25vw;
            margin: 30px 10px 20px;
            width: 20%;
            height: 30px;
        }
        .result-text {
            color: white;
            display: none;
            font-size: 4vw;
            text-align: center;
        }
        .incompatible-error {
                display: none;
            }
    @media only screen and (max-width: 768px) {
        .image-container {
            display: none;
        }
        .incompatible-error {
            display: block;
            font-size: 4vw;
            text-align: center;
        }
    }
    </style>
</head>
<body>
    <div class="image-container">
        <h1 class="header">Find the correct combination</h1>

        <div class="image-row">
            <div class="image-group">
                <img class="image" id="evil-stare" src="https://i.ibb.co.com/dJ1VKH8/evil-stare.jpg" draggable="true" ondragstart="drag(event)">
            </div>
            <div class="image-group" id="container1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="image-row">
            <div class="image-group">
                <img class="image" id="neuro-boil" src="https://i.ibb.co.com/g9jYkHg/neuro-boil.jpg" draggable="true" ondragstart="drag(event)">
            </div>
            <div class="image-group" id="container2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="image-row">
            <div class="image-group">
                <img class="image" id="tiger" src="https://i.ibb.co.com/wLFqTCy/tiger.jpg" draggable="true" ondragstart="drag(event)">
            </div>
            <div class="image-group" id="container3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>

        <div class="button-group">
            <button class="button" onclick="reset()">Reset</button>
            <button class="button" onclick="finish()">Finish</button>
        </div>

        <h1 class="result-text">You got <span id="result"></span>/3 correct</h1>
    </div>

    <h1 class="incompatible-error">This page is not supported for mobile devices</h1>

    <script>
        function allowDrop(event) {
            event.preventDefault();
        }

        function drag(event) {
            event.dataTransfer.setData("text", event.target.id);
        }

        function drop(event) {
            event.preventDefault();

            let data = event.dataTransfer.getData("text");
            event.target.appendChild(document.getElementById(data));
        }

        function reset() {
            console.log("reset")
            window.location.reload();
        }

        function finish() {
            const container1 = document.getElementById("container1");
            const container2 = document.getElementById("container2");
            const container3 = document.getElementById("container3");

            const evilStare = document.getElementById("evil-stare");
            const neuroBoil = document.getElementById("neuro-boil");
            const tiger = document.getElementById("tiger");

            let correct = 0;
            if (container1.contains(tiger)) {
                correct += 1;
                if (container2.contains(neuroBoil)) {
                    correct += 1;
                    if (container3.contains(evilStare)) {
                        correct += 1;
                    }
                }
            }

            showResults(correct);
        }

        function showResults(correct) {
            const imageContainer = document.getElementsByClassName("image-row");
            const header = document.getElementsByClassName("header");
            const buttonGroup = document.getElementsByClassName("button-group");
            const resultText = document.getElementsByClassName("result-text");

            for (i = 0; i < imageContainer.length; i++) {
                imageContainer[i].style.display = "none";
            }
            header[0].style.display = "none";
            buttonGroup[0].style.display = "none";
            resultText[0].style.display = "block";
            document.getElementById("result").innerHTML = correct;
        }
    </script>
</body>
</html>

Brillianta Febimas Winawan

Search This Blog

Drag & Drop API | JavaScript

Labels

Comments

Post a Comment

Popular posts from this blog

Form Input | HTML

Login & Registration Form | Project

SVG | HTML