Selamat datang kembali! Kali ini kita akan membahas tentang Drag and Drop API, sebuah API model pada HTML5 yang memungkinkan pengguna untuk men-drag dan men-drop elemen ke dalam website atau aplikasi. Fitur ini sangat berguna untuk meningkatkan interaksi antara pengguna dan website, serta memberikan pengalaman yang lebih intuitif dan mudah digunakan.
Pada artikel ini, kita akan membahas secara detail tentang pengertian, cara kerja, dan contoh implementasi dari Drag and Drop API. Dengan begitu, kamu akan lebih memahami bagaimana cara mengintegrasikan fitur menarik ini ke dalam website atau aplikasi yang kamu buat.
Yuk, simak artikel berikutnya untuk mengetahui selengkapnya tentang Drag and Drop API pada HTML5!
Drag and Drop API
Saat ini, interaksi drag-and-drop sudah menjadi hal yang umum dalam user interface. Namun, seringkali kita harus mengandalkan library JavaScript untuk menambahkan fitur tersebut ke dalam aplikasi kita. Tapi, bagaimana jika library tersebut tidak tersedia? Jangan khawatir, karena sekarang kita bisa memanfaatkan API bawaan pada peramban web modern sebagai solusi alternatif. Yup, inilah yang disebut dengan Drag-and-Drop API. Dengan menggunakan API ini, kita dapat mengimplementasikan interaksi drag-and-drop dengan mudah tanpa harus mengandalkan library tambahan yang mungkin justru akan menambah overhead pada aplikasi kita.
Apa itu Drag and Drop API
Drag and Drop merupakan salah satu fitur yang sangat populer pada HTML5. Kita dapat dengan mudah mengambil (grab) sebuah objek dan menyeretnya (drag) ke lokasi lain (drop). Namun, terkadang kita tidak membutuhkan library JavaScript tambahan untuk menambahkan fitur ini pada aplikasi kita, sehingga kita dapat memanfaatkan API yang tersedia di peramban web modern sebagai solusi alternatif.
API ini sangat bergantung pada event model DOM, yang memungkinkan kita untuk mendapatkan informasi tentang objek yang sedang kita seret (drag) dan yang kita letakkan (drop), serta memperbarui elemen saat kita menyeret atau meletakkan suatu objek. Dengan menggunakan event handler JavaScript, kita dapat mengubah setiap elemen menjadi item yang dapat kita seret dan letakkan ke dalam dropzone.
Browser yang mendukung Drag and Drop API
Sebelum kita mulai menggunakan API Drag and Drop, penting untuk memeriksa apakah browser yang kita gunakan mendukung fitur ini. Beberapa versi browser lawas mungkin belum mendukung Drag and Drop API. Oleh karena itu, pastikan browser yang digunakan mendukung fitur ini. Berikut adalah beberapa versi browser yang mendukung Drag and Drop API:
| API | Chrome | Firefox | Safari | Edge | Opera |
| Drag and Drop | 4.0 | 3.5 | 6.0 | 9.0 | 12.0 |
Contoh Drag and Drop API
Yuk, mari kita belajar cara menggunakan fitur Drag and Drop pada HTML5. Dengan fitur ini, kita dapat membuat pengalaman interaksi yang lebih intuitif dan menarik bagi pengguna. Sebelum memulai, pastikan browser yang kamu gunakan mendukung Drag and Drop API. Untuk mengeceknya, kamu bisa melihat daftar browser yang didukung di bawah ini:
- Google Chrome: versi 4.0 ke atas
- Mozilla Firefox: versi 3.5 ke atas
- Apple Safari: versi 3.1 ke atas
- Microsoft Edge: versi 12 ke atas
- Internet Explorer: tidak didukung
- Opera: versi 12.0 ke atas
Setelah memastikan browser kamu mendukung, langsung saja kita lihat contoh kode HTML untuk mengimplementasikan Drag and Drop API di bawah ini:
Sumber
Target
<!DOCTYPE html>
<html>
<head>
<title>Contoh Drag and Drop API</title>
<style>
#source, #target {
padding: 10px;
margin: 10px;
border: 1px solid black;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="source" ondragstart="drag(event)" draggable="true">
<p>Sumber</p>
</div>
<div id="target" ondragover="allowDrop(event)" ondrop="drop(event)">
<p>Target</p>
</div>
</body>
</html>Pada contoh kode di atas, terdapat 2 div yang masing-masing memiliki id “source” dan “target”. Ketika kita menyeret dan melepaskan elemen pada div dengan id “source”, elemen tersebut akan ditempatkan pada div dengan id “target”. Fungsi allowDrop digunakan untuk mengizinkan melepas elemen pada div “target”, fungsi drag digunakan untuk mengambil data elemen yang diseret, dan fungsi drop digunakan untuk menempatkan elemen pada div “target”.
Method dari Drag and Drop API
Ketika kita menggunakan fitur Drag and Drop pada HTML5, ada 3 method yang sangat penting untuk diketahui. Method-method tersebut adalah ondragstart, ondragover, dan ondrop. Singkatnya, ondragstart digunakan untuk memulai proses drag objek, ondragover untuk menentukan daerah drop objek, dan ondrop untuk menyelesaikan proses drop objek. Agar lebih memahami dan terampil dalam menggunakan ketiga method tersebut, simak penjelasan detailnya di bawah ini!
Method ondragstart
Dalam kode contoh di atas, kita memanfaatkan method ondragstart untuk memicu fungsi drag (event), yang pada gilirannya akan menentukan data yang akan di-drag. Atribut lain yang perlu diperhatikan adalah method dataTransfer.setData(), yang berfungsi untuk menentukan tipe dan nilai data yang akan di-drag. Pada contoh ini, tipe datanya adalah “text” dan nilainya adalah id dari elemen yang dapat diseret yaitu “drag1”. Dengan menggunakan Drag and Drop API, kita dapat membuat interaksi drag-and-drop yang keren dan mudah diaplikasikan pada proyek web kita.
<!DOCTYPE html>
<html>
<head>
<title>Contoh Method ondragstart pada Drag and Drop API HTML</title>
<style>
#drag1 {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
}
</style>
<script>
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
</script>
</head>
<body>
<div id="drag1" draggable="true" ondragstart="drag(event)">Drag Saya</div>
</body>
</html>Pada contoh di atas, method ondragstart digunakan untuk memanggil fungsi drag(event) ketika elemen di-drag. Fungsi tersebut mengatur data apa yang akan di-drag menggunakan method dataTransfer.setData(). Dalam contoh ini, tipe data yang diatur adalah “text” dan nilai datanya adalah id dari elemen yang sedang di-drag, yaitu “drag1”.
Method ondragover
Jika ingin membuat penggunaan fitur drag and drop pada aplikasi web lebih interaktif, maka penting bagi kita untuk memahami method ondragover pada Drag and Drop API pada HTML5. Method ini berfungsi untuk menentukan letak data yang di-drag dapat di-drop ke tempat tujuan. Pada dasarnya, ketika kita melakukan drag pada sebuah elemen dan ingin meletakkannya di area yang ditentukan, elemen tersebut harus memiliki izin untuk dapat di-drop ke dalam elemen tersebut.
Namun, secara default, data atau elemen tidak dapat di-drop di elemen lain. Oleh karena itu, kita harus menghentikan event handling pada elemen tersebut dengan menggunakan method event.preventDefault(). Dengan begitu, kita dapat memberi izin untuk dapat melakukan drop pada elemen tersebut dan membuat aplikasi web lebih interaktif.
Berikut contoh implementasi kode pada method ondragover pada Drag and Drop API HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh ondragover pada Drag and Drop API HTML</title>
<style>
#dropzone {
width: 300px;
height: 200px;
background-color: #f2f2f2;
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div id="dropzone" ondragover="allowDrop(event)">
<p>Drag file ke sini untuk upload</p>
</div>
<script>
function allowDrop(event) {
event.preventDefault();
}
</script>
</body>
</html>Pada contoh di atas, terdapat sebuah div dengan id="dropzone" yang berfungsi sebagai dropzone, kemudian pada saat user me-drag sesuatu ke dalam dropzone, maka method allowDrop(event) akan dipanggil.
Fungsi dari method allowDrop(event) adalah untuk mencegah handling dari browser pada saat user me-drop objek di dalam dropzone. Hal ini dilakukan dengan menggunakan event.preventDefault(). Dengan begitu, kita dapat mengimplementasikan logika kita sendiri ketika terjadi drop pada dropzone.
Method ondrop
ondrop adalah sebuah event yang terjadi ketika objek atau data yang sedang di-drag dijatuhkan (dropped) ke dalam sebuah drop zone. Ketika event ini terjadi, sebuah fungsi dapat dipanggil untuk melakukan aksi tertentu seperti memproses data yang dijatuhkan ke dalam drop zone. Dengan menggunakan event handler ondrop, kita dapat mengontrol perilaku saat objek atau data di-drop ke dalam sebuah elemen pada halaman web yang menggunakan fitur drag and drop.
Berikut adalah contoh kode implementasi Drag and Drop API lengkap dengan seluruh method dan atributnya:
Contoh Drag and Drop API
<!DOCTYPE html>
<html>
<head>
<title>Contoh Drag and Drop API</title>
<style type="text/css">
#drag1, #drag2 {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
margin: 10px;
float: left;
}
#dropzone {
width: 220px;
height: 120px;
background-color: #f2f2f2;
border: 2px dashed #ccc;
padding: 10px;
float: left;
margin: 10px;
display:flex;
}
</style>
</head>
<body>
<h2>Contoh Drag and Drop API</h2>
<div id="drag1" draggable="true" ondragstart="drag(event)">Drag 1</div>
<div id="drag2" draggable="true" ondragstart="drag(event)">Drag 2</div>
<div id="dropzone" ondragover="allowDrop(event)" ondrop="drop(event)">
Dropzone
</div>
<script type="text/javascript">
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>Kode di atas menampilkan dua elemen yang dapat di-drag (#drag1 dan #drag2) dan sebuah elemen dropzone (#dropzone). Ketika elemen di-drag, method drag(event) akan dipanggil dan akan menentukan data apa yang akan di drag menggunakan event.dataTransfer.setData(). Method allowDrop(event) digunakan untuk memberikan izin drop pada elemen dropzone dan menghindari default handling dari elemen tersebut menggunakan event.preventDefault(). Ketika data di-drag dijatuhkan pada elemen dropzone, method drop(event) akan dipanggil dan akan mengambil data yang telah di-drag menggunakan event.dataTransfer.getData() dan menempatkannya pada elemen dropzone dengan event.target.appendChild().
Kesimpulan
Dalam pengembangan web, Drag and Drop API pada HTML5 dapat menjadi fitur yang sangat berguna dan memudahkan pengguna untuk mengelola objek pada halaman web. Terdapat tiga method utama pada Drag and Drop API, yaitu ondragstart, ondragover, dan ondrop. Method ondragstart berfungsi untuk menginisialisasi objek yang akan di-drag, ondragover untuk menentukan letak data yang dapat di-drop, dan ondrop untuk menangani event drop ketika objek dijatuhkan pada lokasi yang diinginkan. Selain itu, untuk memanipulasi data yang di-drag dan di-drop, kita dapat menggunakan atribut seperti dataTransfer.setData() dan event.preventDefault(). Dalam penggunaannya, perlu diperhatikan browser yang mendukung Drag and Drop API serta memeriksa versi browser terlebih dahulu sebelum menerapkan fitur ini pada halaman web.
