Website yang indah tidak hanya dilihat dari tampilannya saja, akan tetapi dilihat juga dari berbagai fitur, animasi, functionality, interaksi dan lain sebagainya. JavaScript sebagai salah satu bahasa pemrograman web saat ini semakin pesat dan semakin banyak fitur-fitur baru yang disematkan untuk mempermudah seorang web developer untuk membuat website yang interaktif. Salah satunya adalah dengan membuat suatu elemen yang bisa didrag kemanapun anda mau, yang akan saya bahas cara membuatnya

Cara membuat elemen agar bisa didrag

Selamat Datang di situs jagocoding.com

Perkenalkan nama saya Khaerul Amin, saya member baru disini.
Nantinya Insya Allah saya akan memberikan tutorial-tutorial
seputar javascript untuk tingkat menengah sampai lanjutan.

Dan untuk postingan pertamanya, <jika disetujui> yaitu cara
membuat elemen agar bisa didrag kemanapun anda mau, seperti
jQuery Ui Draggable tapi yang akan saya buat cukup menggunakan
javascript murni tanpa javascript library apapun.

Oke dari pada kebanyakan intro, kita langsung saja ke code.

Pertama kita buat html-nya terlebih dahulu, kurang lebih seperti ini

<!doctype html>
<html lang="id">
    <head>
        <meta charset="utf-8">
        <title>Belajar Membuat Elemen Agar Bisa Didrag</title>
        <style>
            /* KODE CSS DISINI */
        </style>
    </head>

    <body>
        <!-- Ini elemen yang akan dibuat agar bisa didrag -->
        <div id="target">
            <div class="judul">Hanya Sebuah Contoh</div>
            <div class="isi">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                   doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                   veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                   ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                   consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                </p>
            </div>
        </div>
        <script>
            // KODE JS DISINI
        </script>
    </body>
</html>

Sekarang tambahkan style ini dibaris /* KODE CSS DISINI */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
            
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    background: #f6f6f6;
    font-size: 14px;
    line-height: 150%;
}
#target {
    background: #fff;
    max-width: 600px;
    /* 
	   Jangan menggunakan margin karena akan 
       berpengaruh pada hasil akhir
    */
                
    /* Apapun selain static */
    position: relative;
                
    /* Agar user tau elemen ini bisa didrag */
    cursor: move;
    box-shadow: 0 0 5px hsla(0,0%,0%,.4);
}
#target .judul {
    background: #09f;
    color: #fff;
    padding: 10px 20px;
}
#target .isi {
    padding: 20px;
}

Saya hanya memberikan style yang sederhana saja mengingat ini tutorial
tentang javascript bukan css. Yang harus diperhatikan adalah style pada
#target harus mengatur [position] selain static. Bisa relative, fixed
atau absolute. Jika tidak dilakukan, maka script tidak akan bekerja.

Next, yaitu yang terpenting pada baris // KODE JS DISINI
ganti dengan script ini.

// Namespace untuk menghindari polusi pada window
var com = com || {};
com.jagoCoding = com.jagoCoding || {};
            
// Namespace untuk setiap author ^_^
com.jagoCoding.erul = com.jagoCoding.erul || {};
            
// IIFE
(function (global, exports) {
    // global sama saja dengan window
    // exports sama saja dengan com.jagoCoding.erul
    'use strict';
                
    // KODE BERIKUTNYA DISINI
}(window, com.jagoCoding.erul));

Disini saya menggunakan Namespace dan IIFE agar variable atau fungsi
yang saya buat tetap aman dari script lain yang mungkin bisa membuat
script yang saya buat tidak bekerja atau sebaliknya.

Lanjut !! ganti // KODE BERIKUTNYA DISINI dengan ini.

var doc = global.document;
                
/**
 * Fungsi untuk membuat elemen bisa didrag
 * @param {String} id nilai attribute id elemen yang mau dibuat draggable
 */
var Drag = function (id) {
    var bolehDidrag, // Cek apakah elemen harus mengikuti kursor atau tidak
        element, // Referensi Elemen
        style, // Referensi Elemen.style agar kode lebih cepat
        X, Y; // Posisi kursor secara horizontal (X) dan vertikal (Y)
                    
    if ('string' !== typeof id) {
        throw TypeError('Memerlukan string');
    }
                    
    element = doc.getElementById(id);
                    
    if (!element) {
        throw ReferenceError('Elemen tidak ditemukan');
    }
                    
    style = element.style;
                    
    // Fungsi ini akan dipanggil ketika element akan didrag
    function mulaiDidrag(event) {
        // Pastikan tombol mouse/keypad yang kiri yang ditekan
        if (1 === event.which) {
            // Agar teks tidak terblock
            event.preventDefault();
                            
            X = event.pageX;
            Y = event.pageY;
                            
            bolehDidrag = true;
        }
    }
                    
    // Fungsi ini akan dipanggil ketika element sedang didrag
    function sedangDidrag(event) {
        var x, y, left, top;
        if (bolehDidrag) {
            x = event.pageX;
            y = event.pageY;

            // Dapatkan posisi elemen saat ini
            left = parseFloat(style.left) || element.offsetLeft;
            top = parseFloat(style.top) || element.offsetTop;
                            
            // Hmmmhh... Tentukan posisi yang baru
            x =  Math.max(0, x - X + left);
            y = Math.max(0, y - Y + top);
                            
            // Atur
            style.left = x + 'px';
            style.top = y + 'px';
                            
            // Update posisi kursor
            X=event.pageX;
            Y=event.pageY;
        }
    }
                    
    // Fungsi ini akan dipanggil ketika element selesai didrag
    function selesaiDidrag() {
        bolehDidrag = false; 
    }
                    
    // Semua variabel dan fungsi diatas tidak bisa diakses diluar
    // IIFE jadi saya menambahkan dua fungsi dibawah untuk dapat
    // mengakses fungsi dan variabel diatas
    return {
        mulai: function () {
            element.addEventListener('mousedown', mulaiDidrag, false);
            doc.addEventListener('mouseup', selesaiDidrag, false);
            doc.addEventListener('mousemove', sedangDidrag, false);
        },
        berhenti: function () {
            element.removeEventListener('mousedown', mulaiDidrag, false);
            doc.removeEventListener('mouseup', selesaiDidrag, false);
            doc.removeEventListener('mousemove', sedangDidrag, false);
        }
    };
};
                 
// Mengexpose fungsi Drag agar bisa digunakan diluar IIFE
exports.Drag = Drag;

Oke kawan... Sekarang fungsi kita sudah jadi, dan cara menggunakannya
gampang saja. cukup masukan kode ini diatas </script>

// Tunggu sampai Dom sudah siap
document.addEventListener('DOMContentLoaded', function () {
    var contoh = com.jagoCoding.erul.Drag('target');
    
    // Oke.. jadikan elemen tersebut bisa didrag
    contoh.mulai();
    
    // Untuk menonaktifkannya gunakan
    // contoh.berhenti();
});

Sekian dulu yang bisa saya berikan. Jika ada yang masih bingung
agan bisa bertanya kepada saya. Jika agan sudah bisa, saya kasih
tantangan mudah. Yaitu membuat fungsi yang bisa merize ukuran
suatu elemen. Untuk fungsinya hampir sama dengan yang diatas
hanya ada perubahan sedikit. Sekian saja Sampai Jumpa lagi
dipostingan selanjutnya. AAMIIN...


About Author

Khaerul Amin

Khaerul Amin itu........?? TERSERAH ANDA SAJA BAGAIMANA MAU MENILAI SAYA


Comment & Discussions

  • Dyki Surahman Abi
    makasih buat tutorialnya gan.
    cuma mau ngasih tau aja kalo javascript sama java itu beda dan beda pembuatnya, coba deh cari di google. jadi logonya / gambarnya kayak nggk pas gitu

    • Khaerul Amin

      Hehe...he....

      Untuk yang itu saya juga tau. Tapi masalah thumbnail itu otomatis berdasarkan katagorinya. Cek aja tutorial js yang lain


  • Rizky Ramadhan-kun
    Ntaps

  • Please LOGIN before if you want to give the comment.