React adalah pustaka JavaScript antarmuka pengguna (UI) yang terkenal. Anda dapat menggunakan pustaka React untuk membuat berbagai jenis aplikasi web mulai dari aplikasi media sosial, platform eCommerce, blog, aplikasi satu halaman, sistem manajemen konten (CMS), Dasbor, dan visualisasi data, dan masih banyak lagi.
Pengembang dapat memperluas fungsionalitas aplikasi React menggunakan berbagai pustaka dan kerangka kerja. Perpustakaan semacam itu dapat dikelompokkan ke dalam kelas yang berbeda; Drag-and-Drop merupakan salah satu kategori library yang cukup populer.
Fungsi Seret dan Lepas adalah interaksi UI yang memungkinkan pengguna mengeklik/memilih elemen di layar, menyeretnya, dan melepaskannya di komponen lain. Contoh sempurna dari fungsi ini adalah mengatur ulang item dalam daftar dengan menyeret dan menjatuhkan item ke lokasi yang Anda inginkan.
Anda juga dapat menggunakan fungsionalitas Seret dan Lepas dalam kasus berikut;
- Unggah file: Pengguna dapat menarik dan melepas file alih-alih menggulir melalui mesin mereka untuk memilih dan mengunggah file.
- Papan Kanban: Anda dapat membuat dasbor tempat pengguna dapat menarik dan melepas item tergantung pada tingkat atau tahapan aktivitas.
- Galeri gambar: Anda dapat memiliki galeri gambar tempat pengguna dapat mengunggah dan mengatur ulang gambar.
- Widget: Pengguna dapat menyesuaikan tampilan aplikasi dengan menyeret dan melepaskan widget.
- Keranjang belanja: Pengguna dapat mengklik item, menyeretnya, dan memasukkannya ke dalam keranjang.
Pustaka Seret dan Lepas React adalah kumpulan komponen bawaan yang memungkinkan pengembang untuk mengimplementasikan fungsionalitas Seret dan Lepas dalam aplikasi React.
Pustaka ini dilengkapi dengan komponen yang dapat digunakan kembali, memungkinkan pengembang untuk membuat elemen yang dapat diseret dan dilepas. Pustaka menangani berbagai peristiwa seperti seret mulai, seret masuk, seret keluar, dan lepas.
Bagaimana perpustakaan Seret dan Lepas akan membantu dalam interaksi UI yang lebih baik
- Pengalaman pengguna yang ditingkatkan: Fungsi seret dan lepas adalah pendekatan intuitif bagi pengguna untuk berinteraksi dengan aplikasi. Opsi untuk menyeret dan menjatuhkan item alih-alih memasukkannya secara manual memberikan interaksi yang interaktif dan lancar.
- Alur kerja yang disederhanakan: Alih-alih mengunggah file dari lokasi berbeda di komputer Anda ke aplikasi, Anda cukup menarik dan melepasnya.
- Peningkatan produktivitas: Fungsi seret dan lepas menghemat waktu, membuat pengguna lebih produktif.
- Cocok untuk perangkat seluler: Perangkat seluler seperti smartphone dan tablet memiliki ruang layar yang terbatas. Sebagian besar pengguna mengandalkan gerakan untuk navigasi, yang menjadikan drag-and-drop sebagai tambahan yang luar biasa.
- Menyediakan antarmuka yang menarik: Fungsi seret dan lepas dapat menambahkan daya tarik visual ke antarmuka pengguna aplikasi Anda. Anda dapat menambahkan animasi yang memberikan umpan balik atau menjelaskan tindakan saat pengguna menarik dan melepas item di aplikasi.
Ini adalah perpustakaan Drag and Drop React terbaik:
Bereaksi DnD
React DnD adalah sekumpulan utilitas React untuk membangun antarmuka drag-and-drop yang rumit. Pustaka ini sempurna untuk membuat aplikasi yang mirip dengan Trello dan Storify, di mana fungsionalitas seret dan lepas juga melibatkan transfer data.
Instalasi;
npm instal react-dnd react-dnd-html5-backend
Anda dapat mengimpor React DnD ke komponen React Anda sebagai;
import { useDrag } from 'react-dnd'
Fitur utama
- Berfungsi dengan komponen Anda: Pustaka ini tidak menyediakan widget siap pakai. Namun, itu membungkus komponen Anda dan menyuntikkan alat peraga ke dalamnya.
- Dapat diperluas: Anda dapat menambahkan backend khusus berdasarkan peristiwa mouse atau peristiwa sentuh saat menggunakan perpustakaan React DnD.
- Dapat diuji: Anda dapat menggunakan Jest atau Enzyme untuk menguji kode React DnD.
- Dukungan sentuh: React DnD touch backend menambahkan fungsionalitas sentuh ke pustaka ini.
React DnD adalah pustaka sumber terbuka gratis.
Bereaksi Dapat Diseret
React Draggable adalah pustaka React yang sederhana namun kuat yang memudahkan pembuatan elemen yang dapat diseret.
Instalasi;
npm install react-draggable
Untuk menggunakan React Draggable, impor sebagai berikut pada komponen React Anda.
import Draggable from 'react-draggable';
Fitur
- Mudah dipasang dan dikonfigurasi: Anda hanya perlu menginstal dan mengimpor perpustakaan untuk memulai. Anda juga dapat mengimpor komponen individual dari perpustakaan.
- Kompatibel dengan vanilla JavaScript dan React: Anda dapat menggunakan React Draggable dengan JavaScript biasa sebagai berikut;
let Draggable = require('react-draggable');
let DraggableCore = Draggable.DraggableCore;
- Kompatibel dengan pustaka React lainnya: Anda dapat menggunakan React Draggable dengan pustaka lain, seperti React Grid Layout.
React Draggable adalah library Drap and Drop React sumber terbuka gratis.
Bereaksi Dropzone
React Dropzone adalah React Hook sederhana untuk membuat zona drag-and-drop yang sesuai dengan HTML-5 untuk file.
Instalasi;
npm install –save react-dropzone
atau:
benang tambahkan react-dropzone
Anda kemudian dapat mengimpor perpustakaan ini sebagai berikut;
import {useDropzone} from 'react-dropzone';
Fitur
- Styling Dropzone: Pustaka ini tidak menetapkan aturan gaya apa pun, dan Anda dapat menata komponen sesuai keinginan Anda.
- Mengizinkan pengguna menentukan jenis file yang dapat diterima: Anda dapat menginstruksikan Dropzone untuk menerima atau menolak jenis file tertentu dengan menyediakan prop terima.
- Menerima validasi khusus: Prop validator memungkinkan Anda menentukan validasi khusus untuk file yang berbeda.
React Dropzone adalah pustaka Drag and Drop React sumber terbuka dan gratis.
Bereaksi Tata Letak Grid
React Grid Layout adalah tata letak grid yang dapat diubah ukurannya dan dapat diseret untuk React.
Instalasi;
npm install react-grid-layout
Anda dapat mengimpor perpustakaan ini sebagai berikut;
import GridLayout from "react-grid-layout";
Fitur
- Bebas ketergantungan: React Grid Layout dibangun murni di React dan bebas dari JQuery.
- Widget yang dapat diubah ukurannya: Di atas fitur drag-and-drop, Anda juga dapat mengubah ukuran komponen.
- Breakpoint responsif: Pustaka menyediakan tata letak terpisah untuk setiap breakpoint.
- Dapat disesuaikan: Anda dapat menambah atau menghapus widget tanpa membangun kembali seluruh kisi.
React Grid Layout adalah pustaka React open-source gratis.
Bereaksi rnd
React rnd adalah komponen yang dapat diseret dan diubah ukurannya untuk React.
Instalasi;
npm i -S react-rnd
Atau
benang tambahkan react-rnd
Fitur
- Sederhana: Bereaksi rnd dirancang agar sederhana tetapi sangat kuat.
- Kompatibel dengan TypeScript dan JavaScript: Anda dapat menggunakan React rnd dengan aplikasi Anda terlepas dari apakah Anda telah mengonfigurasinya dengan JavaScript atau TypeScript.
- Mendukung pengubahan ukuran: Anda dapat dengan mudah mengubah ukuran komponen yang dibuat menggunakan React rnd agar sesuai dengan kebutuhan Anda.
React rnd adalah pustaka React open-source gratis.
React Virtualisasi dnd
React Virtualized dnd adalah framework React drag-and-drop yang menampilkan scrollbar virtualisasi bawaan.
Instalasi;
npm install –save react-virtualized-dnd
Anda dapat mengimpor React Virtualized dnd sebagai;
import ExampleBoard from 'react-virtualized-dnd';
Fitur
- Ragam komponen untuk dipilih: Komponen dikelompokkan menjadi “Tinggi Tetap”, “Tinggi Variabel”, dan “Dropable yang Dapat Dikelompokkan”.
- Dapat disesuaikan: Anda dapat menyesuaikan komponen dari React Virtualized dnd agar sesuai dengan kebutuhan Anda.
React Virtualized dnd adalah framework React sumber terbuka yang kode sumbernya dihosting di GitHub.
Bereaksi Bergerak
React Movable adalah library React drag-and-drop untuk daftar dan tabel.
Instalasi;
benang tambahkan bereaksi-bergerak
Anda dapat mengimpor perpustakaan ini sebagai;
import { List, arrayMove } from 'react-movable';
Fitur
- Berbagai opsi drag-and-drop untuk dipilih: Pustaka memiliki kode boilerplate untuk berbagai jenis komponen drag-and-drop yang dapat dipilih.
- Pustaka ringan: React Movable tidak memiliki dependensi seperti JQuery. Ini kurang dari 4kB (gzip).
- Penataan gaya yang tidak dipilih: React Movable tidak mengontrol bagaimana Anda ingin mendesain aplikasi Anda.
- Dukungan sentuh: Pustaka ini membantu membuat aplikasi yang dapat digunakan di ponsel cerdas, tablet, dan perangkat apa pun dengan fungsi sentuh.
- Ditulis dalam TypeScript: Anda dapat memperkenalkan Type ke kode Anda, sebuah fungsi yang tidak tersedia di JavaScript.
React Movable adalah perpustakaan React open-source gratis.
Dapat diseret
Draggable adalah perpustakaan React drag-and-drop yang memungkinkan pengembang membuat event drag-and-drop dengan meringkas event browser asli ke dalam API yang komprehensif.
Instalasi;
npm install @shopify/draggable –save
atau melalui benang:
benang tambahkan @shopify/draggable
Anda dapat mengimpor Draggable ke aplikasi React sebagai;
import { Draggable } from '@shopify/draggable';
Fitur
- Komponen yang dikategorikan: Menemukan komponen yang tepat untuk digunakan itu mudah karena komponen dikategorikan. Komponen ini dapat disesuaikan.
- Kompatibel dengan browser utama: Anda dapat menggunakan Draggable dengan browser seperti Google Chrome, Mozilla Firefox, dan Apple Safari.
- Mendukung TypeScript: Saat bekerja dengan pustaka ini, Anda dapat menambahkan definisi TypeScript ke kode Anda.
- Mendukung plugin: Anda dapat menambah fungsionalitas Draggable dengan plugin seperti Collidable dan SwapAnimation.
Draggable adalah pustaka React open-source gratis yang dikelola oleh kontributor.
Bereaksi Seret untuk memilih
React drag-to-select adalah pustaka React yang dapat Anda gunakan untuk menambahkan fungsionalitas drag-to-select ke aplikasi Anda.
Instalasi;
npm install –save @air/react-drag-to-select
Atau
benang tambahkan @air/react-drag-to-select
Anda dapat mengimpor perpustakaan ini ke aplikasi Anda sebagai berikut;
import { useSelectionContainer } from '@air/react-drag-to-select'
Fitur
- Sederhana: Perpustakaan ini tidak memilih item. Namun, perpustakaan menggambar kotak pilihan dan memberi Anda koordinat.
- Mendukung TypeScript: Pustaka React Drag-to-select ditulis dalam TypeScript, yang berarti Anda dapat menggunakannya dengan aplikasi React yang ditulis dalam TypeScript dan JavaScript.
- Mendukung pengujian: Anda dapat menggunakan pustaka ini dengan sebagian besar kerangka kerja pengujian React.
React Drag-to-select adalah pustaka sumber terbuka gratis.
Bereaksi Dragula
React Dragula adalah library React drag-and-drop sederhana.
Instalasi;
npm install react-dragula –save
Atau,
bower install react-dragula –save
Fitur
- Dapat disesuaikan: Anda dapat menyesuaikan komponen dari React Dragula agar sesuai dengan kebutuhan Anda.
- Mendukung sentuhan: Anda dapat menggunakan pustaka ini untuk membuat aplikasi yang dapat digunakan di ponsel cerdas, tablet, dan perangkat sentuh lainnya.
- Ringan: React Dragula memiliki ukuran bundel yang kecil, menjadikannya sempurna jika Anda ingin aplikasi React berukuran kecil.
React Dragula adalah pustaka sumber terbuka gratis.
Kesimpulan
Anda sekarang memiliki berbagai pustaka Drag-and-Drop yang dapat Anda gunakan pada aplikasi React berikutnya. Pilihan perpustakaan akan bergantung pada fitur yang ingin Anda miliki pada aplikasi, selera, dan preferensi Anda berikutnya.
Jika aplikasi Anda besar, Anda dapat menggunakan beberapa pustaka seret dan lepas untuk memenuhi kebutuhan yang berbeda. Sebagian besar pustaka ini kompatibel dengan berbagai pustaka pengujian React, sehingga memudahkan pengiriman aplikasi bebas kesalahan.
