Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part2)

Melanjutkan permasalahan yang kemarin. Kok kalau gambarnya didrag n drop ke gambar lain, gambar yang didrag ngilang? Kuncinya ada di javascript.

Ubah bagian function JavaScript

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

Menjadi

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var u = ev.target.id;
    var i = u.substr(0,1);
    if (i!="g") {
     ev.target.appendChild(document.getElementById(data));
    };
}

Penjelasan :

Di sini, gambar harus mempunyai id yang berawalan huruf "g". Jika konten yang didrag diletakkan di konten yang memiliki id yang berawalan "g", maka tidak dilakukan pertukaran data seperti seharusnya. Jadi, gambar tidak bisa diletakkan ke dalam gambar karena gambar memiliki id yang berawalan "g".

Untuk lebih jelasnya, silahkan download contohnya di sini.

Silahkan diobrak-abrik codenya biar paham. Atau silahkan kunjungi Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1).