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...
