Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.

Pernahkah Anda ingin menambahkan fungsionalitas drag-and-drop ke komponen React Anda? Ini tidak sesulit yang Anda bayangkan.

Drag and drop adalah cara memindahkan atau memanipulasi elemen di layar menggunakan mouse atau touchpad. Ini sempurna untuk menyusun ulang daftar item atau memindahkan item dari satu daftar ke daftar lainnya.

Anda dapat membangun komponen drag-and-drop di React menggunakan salah satu dari dua metode: fitur bawaan atau modul pihak ketiga.

Berbagai Cara Menerapkan Drag and Drop di React

Ada dua cara untuk mengimplementasikan drag and drop di React: menggunakan fitur bawaan React, atau menggunakan modul pihak ketiga. Mulai oleh membuat aplikasi React, lalu pilih metode pilihan Anda.

Metode 1: Menggunakan Fitur Bawaan

Di React, Anda bisa menggunakan event onDrag untuk melacak saat pengguna menyeret sebuah elemen, dan event onDrop untuk melacak saat mereka menjatuhkannya. Anda juga dapat menggunakan peristiwa onDragStart dan onDragEnd untuk melacak kapan penyeretan dimulai dan berhenti.

instagram viewer

Untuk membuat elemen dapat diseret, Anda dapat menyetel atribut yang dapat diseret ke true. Misalnya:

impor Bereaksi, { Komponen } dari 'reaksi';
kelasKomponen SayamemanjangKomponen{
 render() {
kembali (
<div
 dapat diseret
 onDragStart={ini.handleDragStart}
 onDrag={ini.handleDrag}
 onDragEnd={ini.handleDragEnd}
>
 Seret aku!
</div>
 );
 }
}
eksporbawaan Komponen Saya;

Untuk membuat elemen droppable, Anda dapat membuat metode handleDragStart, handleDrag, dan handleDragEnd. Metode ini akan berjalan saat pengguna menyeret elemen dan saat mereka menjatuhkannya. Misalnya:

impor Bereaksi, { Komponen } dari 'reaksi';
kelasKomponen SayamemanjangKomponen{
 handleDragStart (acara) {
// Metode ini dijalankan saat penyeretan dimulai
 konsol.log("Dimulai")
 }


handleDrag (acara) {
// Metode ini berjalan saat komponen diseret
 konsol.log("Seret...")
 }


handleDragEnd (acara) {
// Metode ini berjalan saat penyeretan berhenti
 konsol.log("Berakhir")
 }


render() {
kembali (
<div
 dapat diseret
 onDragStart={ini.handleDragStart}
 onDrag={ini.handleDrag}
 onDragEnd={ini.handleDragEnd}
>
 Seret aku!
</div>
 );
 }
}
eksporbawaan Komponen Saya;

Pada kode di atas, ada tiga metode untuk menangani penarikan elemen: handleDragStart, handleDrag, dan handleDragEnd. Div memiliki atribut yang dapat diseret dan menyetel properti onDragStart, onDrag, dan onDragEnd ke fungsi yang sesuai.

Saat Anda menyeret elemen, metode handleDragStart akan dijalankan terlebih dahulu. Di sinilah Anda dapat melakukan pengaturan apa pun yang perlu Anda lakukan, seperti mengatur data yang akan ditransfer.

Kemudian, metode handleDrag berjalan berulang kali saat Anda menyeret elemen. Di sinilah Anda dapat melakukan pembaruan apa pun seperti menyesuaikan posisi elemen.

Terakhir, saat Anda menjatuhkan elemen, metode handleDragEnd berjalan. Di sinilah Anda dapat melakukan pembersihan apa pun yang perlu Anda lakukan, seperti mengatur ulang data yang Anda transfer.

Anda juga dapat memindahkan komponen di sekitar layar di onDragEnd(). Untuk melakukan ini, Anda perlu menyetel properti gaya komponen. Misalnya:

impor Bereaksi, { Komponen, useState } dari 'reaksi';
fungsiKomponen Saya() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);


const handleDragEnd = (acara) => {
setX(peristiwa.clientX);
setY(peristiwa.klienY);
 };


kembali (
<div
 dapat diseret
 onDragEnd={handleDragEnd}
 gaya={{
 posisi: "mutlak",
 kiri: x,
 atas: y
 }}
>
 Seret aku!
</div>
 );
}
eksporbawaan Komponen Saya;

Kode memanggil hook useState untuk melacak posisi x dan y komponen. Kemudian, dalam metode handleDragEnd, ia memperbarui posisi x dan y. Terakhir, Anda dapat mengatur properti gaya komponen untuk memposisikannya pada posisi x dan y yang baru.

Metode 2: Menggunakan Modul Pihak Ketiga

Jika Anda tidak ingin menggunakan fitur bawaan React, Anda dapat menggunakan modul pihak ketiga seperti bereaksi-seret-dan-jatuhkan. Modul ini menyediakan pembungkus khusus React di sekitar HTML5 drag-and-drop API.

Untuk menggunakan modul ini, Anda harus menginstalnya terlebih dahulu menggunakan npm:

npm Install bereaksi-seret-Dan-menjatuhkan--menyimpan

Kemudian, Anda dapat menggunakannya di komponen React Anda:

impor Bereaksi, { Komponen } dari 'reaksi';
impor { Dapat Diseret, Dapat Dijatuhkan } dari 'bereaksi-seret-dan-jatuhkan';
kelasKomponen SayamemanjangKomponen{
 render() {
kembali (
<div>
<Jenis yang dapat diseret ="foo" data="batang">
<div>Seret aku!</div>
</Draggable>


<Jenis yang dapat dijatuhkan={['foo']} onDrop={ini.handleDrop}>
<div>Jatuhkan di sini!</div>
</Droppable>
</div>
 );
 }


handleDrop (data, peristiwa) {
// Metode ini berjalan saat data turun
menghibur.log (data); // 'batang'
 }
}
eksporbawaan Komponen Saya;

Mulailah dengan mengimpor komponen Draggable dan Droppable dari modul react-drag-and-drop. Kemudian, gunakan komponen ini untuk membuat elemen yang dapat diseret dan elemen yang dapat dilepas.

Komponen Draggable menerima prop tipe, yang menentukan tipe data yang diwakili oleh komponen, dan prop data yang menentukan data yang akan ditransfer. Perhatikan bahwa jenisnya adalah nama khusus yang dapat Anda pilih untuk melacak komponen mana yang berada dalam antarmuka multi-komponen.

Komponen Droppable menggunakan prop types untuk menentukan tipe data yang dapat Anda drop di atasnya. Ini juga memiliki prop onDrop, yang menentukan fungsi panggilan balik yang akan berjalan saat Anda meletakkan komponen di dalamnya.

Saat Anda melepaskan komponen yang dapat diseret pada yang dapat dilepas, metode handleDrop akan berjalan. Di sinilah Anda dapat melakukan pemrosesan apa pun yang perlu Anda lakukan dengan data.

Tip untuk Membangun Komponen DnD yang Ramah Pengguna

Ada beberapa hal yang dapat Anda lakukan untuk membuat komponen drag-and-drop Anda lebih ramah pengguna.

Pertama, Anda harus memberikan umpan balik visual saat elemen diseret. Misalnya, Anda dapat mengubah opasitas elemen, atau menambahkan batas. Untuk menambahkan efek visual Anda dapat menggunakan CSS biasa atau penarik CSS di aplikasi Bereaksi Anda.

Kedua, Anda harus memastikan bahwa pengguna Anda hanya dapat menyeret elemen ke target lepas yang valid. Misalnya, Anda dapat menambahkan jenis atribut ke elemen, yang menentukan jenis komponen yang akan diterimanya.

Ketiga, Anda harus menyediakan cara bagi pengguna untuk membatalkan operasi drag-and-drop. Misalnya, Anda dapat menambahkan tombol yang memungkinkan pengguna membatalkan operasi.

Tingkatkan Pengalaman Pengguna Dengan Seret dan Lepas

Fitur drag-and-drop tidak hanya membantu meningkatkan pengalaman pengguna tetapi juga dapat membantu kinerja aplikasi web Anda secara keseluruhan. Seorang pengguna sekarang dapat dengan mudah mengatur ulang urutan beberapa data tanpa harus me-refresh halaman atau melalui beberapa langkah.

Anda juga dapat menambahkan animasi lain di aplikasi React Anda untuk membuat fitur drag-and-drop lebih interaktif dan mudah digunakan.