Cara membuat elemen agar bisa didrag

Cara membuat elemen agar bisa didrag Oleh: Khaerul Amin

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

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 <meta charset="utf-8"> <style> /* KODE CSS DISINI */ <script> // KODE JS DISINI 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 // 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...

Tentang Penulis

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