Cara Membuat Drag and Drop pada HTML

Drag dan drop adalah sebuah konsep interaktif yang yang memudahkan user dalam menggerakkan object dari satu lokasi ke lokasi yang lain dengan cara menyeretnya (drag). Hal ini memungkinkan user untuk melakukan klik dan menahan klik mouse tersebut kemudian membawa elemen yang diseret menuju ke lokasi yang lain, kemudian melepaskan tombol klik mouse untuk menjatuhkan (drop) elemen yang diseret tersebut (drag). Pada HTML 5 drag dan drop lebih mudah untuk membuat bentuk programnya dan juga lebih mudah untuk digunakan.

Sebelum mempelajari materi tentang Cara membuat Drag dan Drop pada HTML, terlebih dahulu pelajari materi tentang: Spell Check pada HTML Beserta Fungsinya, Cara Mengatur Warna HTML Color Style dan HSL, dan Cara Mengatur Lokasi Peta HTML pada GPS.

Event drag dan drop: Terdapat banyak event drag dan drop seperti yang dijelaskan berikut ini:

• ondragstart; Memanggil sebuah fungsi, drag (event), dengan data spesifik mana yang akan di drag.
• ondragenter; Untuk memutuskan apakah dilakukan penerimaan atau tidak dari target drop. Jika object drop diterima, maka event ini akan dibatalkan.
• ondragleave; Terjadi ketika mouse melepaskan elemen sebelum valid drop target ketika proses drag sedang terjadi.
• ondragover; Secara spesifik dimana data yang di drag akan dilakukan drop.
• ondrop; Secara spesifik dimana proses drop telah terjadi ketika operasi drag telah berakhir.
• ondragend; Terjadi ketika user telah selesai melakukan drag elemen.

Objek transfer data: Properti transfer data digunakan ketika semua proses dari drag dan drop telah terjadi. Properti ini digunakan ketika menahan drag data dari sumber dan drop ke lokasi yang dituju. Terdapat beberapa properti yang berhubungan, yaitu:

• dataTransfer.setData(format, data); Sekumpulan data yang akan di drag.
• dataTransfer.clearData(format); Memanggil fungsi dengan no_argument membersihkan semua data. Memanggil dengan format argumen menghapus data tertentu.
• dataTransfer.getData(format); Mengembalikan data dari format spesifik. Jika tidak terdapat data apapun, maka mengembalikan nilai string kosong.
• dataTransfer.types; Properti ini mengembalikan array dari segala format yang telah diatur untuk event dragstart.
• dataTransfer.file; Digunakan untuk mengembalikan semua file yang telah di drop.
• dataTransfer.setDraglmage(element, x, y); Digunakan untuk menampilkan gambar yang ada sebagai gambar drag ketimbang menggunakan default image pada cursor. Koordinat menentukan lokasi penurunan.
• dataTransfer.addElement(element); Penambahan elemen spesifik yang akan ditarik sebagai drag feedback image.
• dataTransfer.effectAllowed(value); Memberitahu browser bahwa hanya tipe daftar dari operasi yang diijinkan oleh user. Properti dapat diatur sebagai berikut: none, copy, copyLink, copyMove, link, linkMove, move, all, dan uninitilialized.
• dataTransfer.dropEffect(value); Mengendalikan feedback yang diberikan oleh user selama event dragenter dan dragover. Ketika user membawa elemen target, cursor browser akan mengindikasi tipe apa dari operasi yang akan dijalankan (seperti copy, move, dan lain sebagainya). Efek yang diberikan seperti berikut ini: none, copy, link, move.

Prosedur dari Drag dan Drop:
tahap satu, Membuat objek yang dapat dilakukan drag.

• pertama, Setting atribut drag bernilai true untuk elemen yang akan dilakukan drag <img draggable="true">.
• kedua, Tentukan apa yang akan terjadi ketika proses drag dilakukan. Atribut ondragstart akan memanggil sebuah fungsi drag(even) yang akan menentukan data mana yang akan dilakukan drag. Method dataTransfer.setData() mengatur tipe data dan nilai dari data yang di drag.
• ketiga, Event listener ondragstar akan mengatur efek yang diijinkan (copy, move, link, atau terdiri dari beberapa kombinasi).

function dragStart(ev) 

{ev.dataTransfer.setData("text", ev.target.id);}

Baca Juga:

• 255 Kumpulan Karakter yang Sering Digunakan pada HTML
• Membuat Garis Menggunakan Tag HR pada HTML
• Cara Menampilkan Gambar pada HTML Menggunakan Tag Image
• Pembagian Layout pada HTML dan CSS

Tahap dua, Drop objek

• keempat, pada event ondragover menentukan dimana data yang di drag akan di drop. Secara otomatis, data atau elemen tidak dapat di drop dalam elemen lainnya. Untuk memungkinkan terjadi proses drop, makan perlu dilakukan pencegahan default handling dari elemen. Hal ini dapat diselesaikan dengan pemanggilan method event.preventDefault().
• terakhir, event drop, memungkinkan proses drop dapat dilakukan secara nyata.

function dragDrop(ev) 

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

Contoh:

<!DOCTYPE HTML>

<html>

 

<head>

<title>

Drag and Drop box

</title>

  

<script>

function allowDrop(ev) {

ev.preventDefault();}

   

function dragStart(ev) {

ev.dataTransfer.setData("text", ev.target.id);}

   

function dragDrop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));}

</script>

  

<style>

#box {

margin: auto;

width: 50%;

height:200px;

border: 3px solid green;

padding: 10px;

}

 

#box1, #box2, #box3 {

float: left;

margin: 5px;

padding: 10px;

}

 

#box1 {

width: 50px;

height: 50px;

background-color: #F5B5C5;

}

 

#box2 {

width: 100px;

height: 100px;

background-color: #B5D5F5;

}

 

#box3 {

width: 150px;

height: 150px;

background-color: #BEA7CC;

}

 

p {

font-size:20px;

font-weight:bold;

text-align:center;

}

 

.mkn {

font-size:40px;

color:#009900;

font-weight:bold;

text-align:center;

}

</style>

</head>

 

<body>

<div class = "mkn">

Menu tarik tarik

</div>

 

<p>

Drag and drop of boxes

</p>

 

<div id = "box">

<div id="box1" draggable="true"ondragstart="dragStart(event)"></div>

<div id="box2" draggable="true"ondragstart="dragStart(event)"></div>

<div id="box3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>

</div>

 

</body>

</html>

Penjelasan:

• Proses drag dimulai dengan mengatur properti draggable dari elemen yang akan di drag menjadi bernilai true.
• Dapatkan data drag dengan method dataTransfer.getData(). Method ini akan mengembalikan data apapun yang telah diatur dengan tipe sama pada method setData().
• Pemanggilan method event.preventDefault() untuk mengijinkan drop data dari elemen ke dalam elemen lain melalui pencegahan default handling dari elemen.
• Elemen kemudian disimpan dalam variabel data yang mana dapat ditambahkan ke dalam elemen drop.

Contoh: Contoh ilustrasi dari gambar drag dan drop.

<!DOCTYPE HTML>

<html>

 

<head>

<script>

function allowDrop(ev) 

{ev.preventDefault();}

   

function dragStart(ev) 

{ev.dataTransfer.setData("text", ev.target.id);}

   

function dragDrop(ev) 

{ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));}

</script>

 

<style>

.div1 {

width: 240px;

height: 75px;

padding: 10px;

border: 1px solid black;

background-color: #F5F5F5;}

 

p {

font-size:20px;

font-weight:bold;}

 

.mkn {

font-size:40px;

color:#009900;

font-weight:bold;}

</style>

</head>

 

<body>

<div class = "mkn">

Menu Tarik Tarik

</div>

 

<p>

Drag and Drop gambar di dalam kotak

</p>

 

<div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)">

<img id="drag1" src="https://upload.wikimedia.org/wikipedia/id/9/94/NarutoCoverTankobon1.jpg" draggable="true" ondragstart="dragStart(event)" width="220" height="70">

</div>

 

<br>

 

<div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

Fitur Drag and Drop pada HTML merupakan kemampuan untuk menarik elemen (Drag) dari satu lokasi dan melepaskannya (Drop) pada lokasi lain di dalam halaman web. Hal ini membawa sejumlah keuntungan yang signifikan dalam pengalaman pengguna dan pengembangan aplikasi web yang lebih interaktif. Mari bahas beberapa kelebihan dari fitur ini:

• Interaktivitas yang Lebih Baik: Fitur Drag and Drop menambah tingkat interaktivitas dalam aplikasi web. Pengguna dapat dengan mudah memindahkan elemen, mengubah posisi, atau mengorganisir konten dengan cara yang intuitif, membuat pengalaman pengguna lebih dinamis dan menyenangkan.
• Fungsionalitas yang Lebih Fleksibel: Dengan Drag and Drop, pengembang dapat memberikan fungsionalitas yang lebih fleksibel kepada pengguna. Contohnya, pengguna dapat mengunggah file dengan cara menariknya dari folder komputer ke area yang ditentukan pada halaman web, mengurutkan daftar item, atau mengubah tata letak elemen secara mudah.
• Memudahkan Pengguna: Fitur Drag and Drop menjadikan tugas-tugas seperti memindahkan, mengelompokkan, atau mengatur data menjadi lebih mudah bagi pengguna. Ini dapat diterapkan dalam berbagai jenis aplikasi, mulai dari manajemen tugas, penyusunan produk dalam keranjang belanja, hingga perancangan antarmuka pengguna.
• Pengalaman Pengguna yang Lebih Personal: Dengan kemampuan Drag and Drop, pengguna dapat membuat pengaturan sesuai dengan preferensi sendiri. Ini memungkinkan untuk menyesuaikan tampilan atau tata letak halaman sesuai dengan kebutuhan atau gaya penggunaan masing-masing.
• Meningkatkan Efisiensi Pengguna: Dalam beberapa aplikasi, Drag and Drop dapat meningkatkan efisiensi. Sebagai contoh, dalam aplikasi manajemen tugas, pengguna dapat mengelompokkan dan memindahkan tugas dengan lebih cepat dan mudah, tanpa perlu banyak klik atau navigasi.
• Pengembangan Aplikasi yang Lebih Menarik: Penggunaan fitur Drag and Drop dapat memberikan sentuhan khusus dalam pengembangan aplikasi web, membuatnya terasa lebih modern, dinamis, dan menarik. Hal ini bisa menjadi nilai tambah yang besar dalam meningkatkan daya tarik aplikasi di mata pengguna.
• Dukungan yang Luas di Banyak Browser: Sebagian besar browser modern mendukung fitur Drag and Drop pada HTML, sehingga fitur ini dapat diakses oleh mayoritas pengguna tanpa perlu khawatir tentang kompatibilitas.

Fitur Drag and Drop memainkan peran penting dalam meningkatkan interaktivitas dan fungsionalitas aplikasi web. Namun, penting untuk merancang implementasi Drag and Drop dengan baik agar sesuai dengan konteks penggunaan dan mempertimbangkan responsivitas serta aksesibilitas bagi semua pengguna. Dengan penggunaan yang tepat, fitur ini dapat memberikan manfaat besar dalam meningkatkan pengalaman pengguna pada aplikasi web.

Referensi Tambahan:

• Cara Menggunakan File Path pada HTML
• Cara Membuat Iframe pada HTML
• Membuat Komentar Dengan HTML
• Membuat Hyperlink pada HTML
• Tag Usang Deprecated pada HTML
• Daftar URL Encoding pada HTML
• Fungsi SVG pada HTML

Artikel ini didedikasikan kepada: Seto Pribadhi, Shafana Fatimatul Khusainiyah, Sita Ardhania Ramadhani, Victor Ryan Tuapattinaja, dan Violla Farentika.

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

Berbagi :