Media Pengembangan Web & App | by APPKEY

Pembuatan Website Front end Panduan Membuat Desain Drag and Drop untuk Memudahkan Pengguna

Panduan Membuat Desain Drag and Drop untuk Memudahkan Pengguna

-

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 –

Sr.No. Acara & Deskripsi
1 dragstart

Fire saat pengguna mulai menyeret objek.

2 dragenter

Diaktifkan saat mouse pertama kali digerakkan ke elemen target saat terjadi seret. Pendengar acara ini harus menunjukkan apakah penurunan diperbolehkan di lokasi ini. Jika tidak ada pendengar, atau pendengar tidak melakukan operasi, maka penurunan tidak diizinkan secara default.

3 dragover

Peristiwa ini dijalankan saat mouse digerakkan di atas elemen saat terjadi seret. Sering kali, operasi yang terjadi selama pemroses akan sama dengan acara dragenter.

4 dragleave

Peristiwa ini dijalankan ketika mouse meninggalkan elemen saat drag terjadi. Pendengar harus menghapus penyorotan atau penanda penyisipan yang digunakan untuk umpan balik drop.

5 menyeret

Fire setiap kali mouse digerakkan saat objek sedang diseret.

6 penurunan

Peristiwa pelepasan dijalankan pada elemen tempat pelepasan terjadi di akhir operasi seret. Pendengar akan bertanggung jawab untuk mengambil data yang sedang diseret dan memasukkannya di lokasi pelepasan.

7 dragend

Fire saat pengguna melepaskan tombol mouse sambil menyeret objek.

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 –

Sr.No. Atribut DataTransfer dan deskripsinya
1 dataTransfer.dropEffect [= nilai]

·        Mengembalikan jenis operasi awal yang telah dipilih di awal.

·        Atribut ini dapat diatur, untuk mengubah operasi yang dipilih.

·        Nilai yang mungkin adalah tidak ada, salin, tautkan, dan pindahkan.

2 dataTransfer.effectAllowed [= nilai]

·        Mengembalikan jenis operasi yang diizinkan.

·        Atribut ini dapat diatur, untuk mengubah operasi yang diizinkan.

·        Nilai yang mungkin adalah none, copy, copyLink, copyMove, link, linkMove, move, all dan uninitialized.

3 dataTransfer.types

Menampilkan DOMStringList yang mencantumkan format yang disetel dalam acara dragstart. Selain itu, jika ada file yang ditarik, salah satu jenisnya adalah string “File”.

4 dataTransfer.clearData ([format])

Menghapus data dari format yang ditentukan. Menghapus semua data jika argumen dihilangkan.

5 dataTransfer.setData (format, data)

Menambahkan data yang ditentukan.

6 data = dataTransfer.getData (format)

Mengembalikan data yang ditentukan. Jika tidak ada data seperti itu, kembalikan string kosong.

7 dataTransfer.files

Mengembalikan FileList dari file yang sedang diseret, jika ada.

8 dataTransfer.setDragImage (elemen, x, y)

Menggunakan elemen yang diberikan untuk memperbarui umpan balik seret, menggantikan umpan balik yang ditentukan sebelumnya.

9 dataTransfer.addElement (elemen)

Menambahkan elemen yang diberikan ke daftar elemen yang digunakan untuk membuat umpan balik seret.

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Artikel Terkait  Cara Membuat Website | Hal-hal Penting yang Harus Anda Ketahui

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya

Artikel Terkait  Web Developer Adalah: Memahami tentang Web Development