Last Updated on January 29, 2022 by

Mungkin sama sekali tidak ada orang yang tidak menyukai desain Drag and Drop. Ini banyak digunakan di PC, ponsel, dan aktivitas sehari-hari di mana Anda menyeret sesuatu dengan tangan Anda dan meletakkannya di tempat lain.

Mayoritas pengguna sudah familiar dengan desain Drag and Drop karena berguna untuk memindahkan, mengelompokkan, atau mengubah ukuran objek.

Apa Itu Drag and Drop?

Desain Drag and Drop (DnD) adalah konsep Antarmuka Pengguna yang kuat yang membuatnya mudah untuk menyalin, menyusun ulang, dan menghapus item dengan bantuan klik mouse. Hal ini memungkinkan pengguna untuk mengklik dan menahan tombol mouse di atas elemen, menyeretnya ke lokasi lain, dan melepaskan tombol mouse untuk melepaskan elemen di sana.

Saat Anda memilih sebuah objek dan memindahkannya untuk menjatuhkannya di tempat lain disebut sebagai opsi desain Drag and Drop. Anda mungkin sudah familiar dengan tindakan ini dengan nama ‘salin dan tempel’ yang Anda lakukan di komputer atau ‘melampirkan file ke email Anda’. Ini lancar, mudah, dan hemat waktu pada saat bersamaan. Drag and Drop pembuat situs web menggunakannya untuk meningkatkan kenyamanan pengguna karena menghemat waktu untuk mencapai hasil yang diinginkan.

Untuk mencapai fungsionalitas Desain Drag and Drop dengan HTML4 tradisional, pengembang harus menggunakan pemrograman JavaScript yang kompleks atau kerangka kerja JavaScript lainnya seperti jQuery, dll.

Sekarang HTML 5 hadir dengan Desain Drag and Drop (DnD) API yang menghadirkan dukungan DnD asli ke browser sehingga lebih mudah untuk membuat kode.

HTML 5 DnD didukung oleh semua browser utama seperti Chrome, Firefox 3.5 dan Safari 4 dll.

Dasar Pekerjaan Drag and Drop

Ada sejumlah peristiwa yang dipicu selama berbagai tahap operasi Drag and Drop. Acara ini tercantum di bawah –

Ikuti Langkah-Langkah Dasar Berikut untuk Menerapkan Opsi Ini:

• Temukan sebuah objek dan klik dengan satu jari di atasnya sekali.
• Tahan ketukan dan mulailah menyeret.
• Drag and Drop di tujuan.
• Anda mendapatkan salinan dari file yang dipindahkan atau objek yang diseret.

Drag and Drop Adalah Sejenis Manipulasi Langsung yang Bekerja Sebagai Berikut:

• Sama seperti banyak interaksi manipulasi langsung lainnya, item harus terlihat di layar. Meskipun kita bisa menyeret objek tak terlihat, kegunaannya mungkin terganggu.
• Objek seperti klik mouse diperlukan untuk memulai interaksi.
• Pengguna memilih objek (dengan tekanan terus menerus) dan menggerakkan jari atau mouse untuk mencapai tujuan yang diinginkan. Ini menjelaskan operasi seret.
• Selanjutnya, pengguna dapat membatalkan pilihan objek dengan kehilangan terus tombol mouse. Ini adalah bagian drop dari operasi.

Jenis Tindakan Berikut Menjadi Lebih Sederhana dengan Desain Drag and Drop:

• Memulai tindakan default: Saat objek dipindahkan ke beberapa ikon dari file .exe, yang tahu cara membuka jenis file tersebut.
• Lampiran: Saat objek diseret dengan lampiran di bidang kerja.
• Mengupload: Ini dapat menggabungkan tindakan default dengan lampiran dan membuat segalanya lebih sederhana.

Pentingnya Fungsi Drag and Drop

Salinan baru dari objek tersebut dibuat yang dipindahkan dari panel samping pembuat situs web desain Drag and Drop. Tindakan ini memungkinkan Anda membuat beberapa baris kode PHP / HTML secara otomatis sehubungan dengan jenis halaman web yang sedang Anda kerjakan. Kode ini menjelaskan properti berikut dari objek yang baru diseret:

• Perilakunya- baik dalam keadaan tenang atau seimbang.
• Properti yang diungkapkan saat objek diklik.
• Ini menyatakan apakah itu aktif atau tidak.
• Lokasi halaman mutlaknya.

Dimungkinkan untuk memindahkan semuanya mulai dari teks, video, gambar, tombol, widget, menu, dan tabel untuk mengubah lapisan menggunakan desain Drag and Drop. Anda dapat mengklik dua kali pada objek dengan mouse untuk mengaktifkan menu yang mencantumkan beberapa tindakan seperti menyalin, memindahkan, mengedit, dan menghapus.

Otomatisasi pengkodean manual dan menyelesaikan sesuatu dalam waktu minimum hanyalah satu sisi koin. Di sisi lain, opsi desain Drag and Drop memiliki kreativitas yang terbatas. Untuk menyelami lebih jauh, diperlukan pengkodean yang mudah, yang tidak selalu terbukti terjangkau karena membutuhkan programmer yang efisien. Jadi, jangan mengharapkan kebebasan total karena sifat dari fitur ini membatasi tindakan Anda.

Aksesibilitas Opsi Drag and Drop

Secara tradisional, opsi Drag and Drop hanya layar sentuh atau interaksi mouse, tetapi sekarang perlu membuatnya dapat diakses oleh pengguna yang juga terlibat dalam teknologi pendukung. Pastikan dua hal yang-

• Ikon pegangan Anda memiliki aksesibilitas keyboard untuk dapat mengambil item melalui bilah spasi.
• Dan, ikon pegangan Anda menampilkan pesan pembaca layar untuk menunjukkan tindakan saat ini dari suatu objek (posisi atau ukurannya).

Menerapkan Drag and Drop Pada Layar Sentuh

Karena kurangnya status hover, maka sulit untuk menerapkan desain Drag and Drop di layar sentuh. Pertama, perlu dipastikan bahwa setidaknya ada ruang kosong 1cm x 1cm yang tersisa untuk menyeret objek sehingga umpan balik yang penting tidak tercakup. Kedua, penting untuk membedakan antara ketukan, gulir, dan pengambilan yang disengaja dengan menggunakan beberapa milidetik sebagai penundaan waktu.

Anda dapat memberikan umpan balik yang jelas tentang pengambilan suatu objek di perangkat seluler dengan menggunakan haptics. Tonjolan halus dapat menunjukkan bahwa objek telah ditangkap, dan tonjolan lainnya dapat menunjukkan bahwa objek telah diseret ke zona lepas.

Karena perubahan kursor tidak tersedia di layar sentuh, disarankan untuk menggunakan Drag and Drop saat

• Tidak ada pilihan lain dengan biaya interaksi berdasarkan menu.
• Anda yakin bahwa pengguna Anda mengharapkan ketersediaan tindakan desain Drag and Drop.

Objek DataTransfer

Metode event listener untuk semua event desain Drag and Drop menerima objek Event yang memiliki atribut hanya baca yang disebut dataTransfer .

The event.dataTransfer kembali datatransfer objek yang terkait dengan acara sebagai berikut –

function EnterHandler(event) {

DataTransfer dt = event.dataTransfer;

………….

}

The datatransfer objek menyimpan data tentang operasi desain Drag and Drop. Data ini dapat diambil dan diatur dalam berbagai atribut yang terkait dengan objek DataTransfer seperti yang dijelaskan di bawah ini –

Proses Pembuatan Desain Drag and Drop

Berikut adalah langkah-langkah yang harus dilakukan untuk mengimplementasikan operasi desain Drag and Drop.

Langkah 1 – Membuat Objek Dapat Diseret

Berikut langkah-langkah yang harus diambil –

• Jika Anda ingin menyeret elemen, Anda perlu menyetel atribut draggable ke true untuk elemen itu.
• Setel event listener untuk dragstart yang menyimpan data yang sedang diseret.
• Dragstart event listener akan menyetel efek yang diizinkan (salin, pindahkan, tautkan, atau beberapa kombinasi).

Berikut adalah contoh untuk membuat objek bisa diseret :

<!DOCTYPE HTML>

<html>

<head>

<style type = “text/css”>

#boxA, #boxB {

float:left;padding:10px;margin:10px; -moz-user-select:none;

}

#boxA { latar belakang – warna: #6632FF; width:80px; height:80px;  }

#boxB { latar belakang – warna: #FF6698; width:160px; height:160px; }

</style>

<script type = “text/javascript”>

function dragStart(ev) {

ev.dataTransfer.effectAllowed = ‘move’;

ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));

ev.dataTransfer.setDragImage(ev.target,0,0);

return true;

}

</script>

</head>

<body>

<center>

<h2>Drag and Drop HTML5 demo</h2>

<div>Mencoba Untuk drag Box Ungu.</div>

<div id = “boxA” draggable = “true”

ondragstart = “return dragStart(ev)”>

<p>Drag Me</p>

</div>

<div id = “boxB”>Dustbin</div>

</center>

</body>

</html>

Langkah 2 – Menjatuhkan Objek

Untuk menerima penurunan, target drop harus mendengarkan setidaknya tiga peristiwa.

• Peristiwa dragenter , yang digunakan untuk menentukan apakah target drop akan menerima drop atau tidak. Jika penyerahan diterima, maka acara ini harus dibatalkan.
• Acara dragover , yang digunakan untuk menentukan umpan balik apa yang akan ditampilkan kepada pengguna. Jika acara dibatalkan, maka umpan balik (biasanya kursor) diperbarui berdasarkan nilai atribut dropEffect.
• Akhirnya, acara drop , yang memungkinkan penurunan yang sebenarnya dilakukan.

Berikut adalah contoh untuk menjatuhkan suatu benda ke benda lain :

<html>

<head>

<style type=”text/css”>

#boxA, #boxB {

float:left;padding:10px;margin:10px;-moz-user-select:none;

}

#boxA { latar belakang – warna: #6632FF; width:80px; height:80px;  }

#boxB { latar belakang – warna: #FF6698; width:160px; height:160px; }

</style>

<script type=”text/javascript”>

function dragStart(ev) {

ev.dataTransfer.effectAllowed=’move’;

ev.dataTransfer.setData(“Text”, ev.target.getAttribute(‘id’));

ev.dataTransfer.setDragImage(ev.target,0,0);

return true;

}

function dragEnter(ev) {

event.preventDefault();

return true;

}

function dragOver(ev) {

return false;

}

function dragDrop(ev) {

var src = ev.dataTransfer.getData(“Text”);

ev.target.appendChild(document.getElementById(src));

ev.stopPropagation();

return false;

}

</script>

</head>

<body>

<center>

<h2>Drag and Drop HTML5 demo</h2>

<div>Mencoba memindahkan box ungu ke box merah.</div>

<div id=”boxA” draggable=”true” ondragstart=”return dragStart(event)”>

<p>Drag Me</p>

</div>

<div id=”boxB” ondragenter=”return dragEnter(event)” ondrop=”return dragDrop(event)” ondragover=”return dragOver(event)”>Dustbin</div>

</center>

</body>

</html>

Kesimpulan

Desain Drag and Drop pada pembuatan situs web tidak selalu merupakan pilihan yang baik untuk membuat situs web. Namun, ketika pengguna menerimanya, interaksi harus relatif langsung. Gunakan penanda yang tepat seperti ikon pegangan dan tawarkan umpan balik yang jelas melalui interaksi untuk membuat fungsi Drag and Drop efektif dan dapat diakses.

Jika Anda ingin tahu lebih banyak informasi tentang desain web, kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store secara gratis!