Cara Menggunakan API Seret dan Lepas HTML

Seret dan lepas adalah fitur penting yang meningkatkan interaksi pengguna dan memfasilitasi pengalaman pengguna yang lancar. Baik Anda ingin membuat pengunggah file, daftar yang dapat diurutkan, atau permainan interaktif, memahami cara memanfaatkan kemampuan API ini adalah keterampilan penting yang harus dimiliki di web Anda perangkat pengembangan.

Dasar-dasar Drag and Drop dalam HTML

Dalam sistem drag-and-drop yang umum, ada dua jenis elemen: tipe pertama terdiri dari elemen yang dapat diseret yang pengguna dapat bergerak dengan mouse, dan tipe kedua menyertakan elemen yang dapat dijatuhkan yang biasanya menentukan di mana pengguna dapat menempatkannya elemen.

Untuk menerapkan drag and drop, Anda harus memberi tahu browser elemen apa yang ingin Anda tarik. Agar suatu elemen dapat diseret oleh pengguna, elemen tersebut harus memiliki a dapat diseretAtribut HTML mulai BENAR, seperti ini:

<divdraggable="true">This element is draggablediv>

Ketika pengguna mulai mengaktifkan peristiwa drag, browser menyediakan gambar "hantu" default yang biasanya memberikan umpan balik mengenai elemen yang sedang diseret.

Anda dapat menyesuaikan gambar ini dengan menyediakan gambar Anda sendiri. Untuk melakukannya, pilih elemen yang dapat diseret dari DOM, buat gambar baru untuk mewakili gambar umpan balik khusus, dan tambahkan dragstart seret pendengar acara seperti ini:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

Pada blok kode di atas, setDragImage metode memiliki tiga parameter. Parameter pertama merujuk pada gambar. Parameter lainnya masing-masing mewakili offset horizontal dan vertikal gambar. Saat Anda menjalankan kode di browser dan mulai menyeret elemen, Anda akan melihat bahwa gambar tarik khusus telah diganti dengan gambar khusus yang disetel sebelumnya.

Jika Anda ingin mengizinkan penurunan, Anda harus mencegah perilaku default dengan membatalkan keduanya dragenter Dan dragover acara, seperti ini:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

Memahami Antarmuka DragEvent

Fitur JavaScript a Tarik Acara antarmuka yang mewakili interaksi drag-and-drop dari pengguna. Di bawah ini adalah daftar kemungkinan jenis peristiwa di bawah Tarik Acara antarmuka.

• menyeret: Pengguna mengaktifkan acara ini sambil menyeret elemen.
• dragend: Peristiwa ini terjadi ketika operasi drag berakhir atau ketika pengguna menghentikannya. Operasi drag biasa dapat diakhiri dengan melepaskan tombol mouse atau menekan tombol escape.
• dragenter: Elemen yang diseret memicu kejadian ini ketika memasuki target pelepasan yang valid.
• dragleave: Saat elemen yang diseret meninggalkan target jatuhkan, peristiwa ini dipicu.
• dragover: Saat pengguna menyeret elemen yang dapat diseret ke target pelepasan, peristiwa akan dipicu.
• dragstart: Acara ini dipicu pada awal operasi drag.
• menjatuhkan: Pengguna memicu peristiwa ini ketika mereka menjatuhkan elemen ke target pelepasan.

Saat menyeret file ke browser dari lingkungan di luar browser (misalnya, pengelola file sistem operasi), browser tidak memicu dragstart atau dragend acara.

Tarik Acara dapat berguna jika Anda ingin mengirimkan acara tarik khusus secara terprogram. Misalnya, jika Anda ingin a div untuk mengaktifkan peristiwa tarik khusus saat memuat halaman, inilah cara Anda melakukannya. Pertama, buat kebiasaan baru Tarik Acara() seperti ini:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

Pada blok kode di atas, customDragStartEvent mewakili sebuah contoh dari Tarik Acara(). Di dalam customDragStartEvent, ada dua argumen konstruktor. Yang pertama mewakili tipe event drag, yang bisa menjadi salah satu dari tujuh tipe event yang disebutkan sebelumnya.

Argumen kedua adalah objek dengan a transfer data kunci yang mewakili sebuah instance dari Transfer data, yang akan Anda pelajari lebih lanjut nanti di panduan ini. Selanjutnya, ambil elemen tempat Anda ingin memicu peristiwa tersebut, dari Model Objek Dokumen (DOM).

const draggableElement = document.querySelector("#draggable");

Kemudian tambahkan, pendengar acara seperti ini:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

Pada event pendengar pertama di atas, fitur fungsi panggilan balik mencatat teks, "Seret dimulai!" dan memanggil setData metode pada transfer data properti di peristiwa obyek. Sekarang, Anda dapat memicu peristiwa khusus seperti ini:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Mentransfer Data Dengan dataTransfer

Itu transfer data objek berfungsi sebagai jembatan antara elemen sumber (item yang dapat diseret) dan elemen target (area yang dapat dijatuhkan) selama operasi seret dan lepas. Ini bertindak sebagai wadah penyimpanan sementara untuk data yang ingin Anda bagikan di antara elemen-elemen ini.

Data ini bisa dalam berbagai bentuk, seperti teks, URL, atau tipe data khusus, menjadikannya alat serbaguna untuk mengimplementasikan berbagai fungsi seret dan lepas.

Menggunakan setData() untuk Mengemas Data

Untuk mentransfer data dari elemen yang dapat diseret ke elemen yang dapat dijatuhkan, Anda akan menggunakan setData() metode yang disediakan oleh transfer data obyek. Metode ini memungkinkan Anda mengemas data yang ingin Anda transfer dan menentukan tipe datanya. Berikut ini contoh dasarnya:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Saat pengguna mulai menyeret elemen tertentu, setData() mengemas teks "Halo, dunia!" dengan tipe datanya teks/polos. Data ini sekarang dikaitkan dengan peristiwa drag dan dapat diakses oleh target yang dapat dijatuhkan selama operasi pelepasan.

Mengambil Data Dengan getData()

Di pihak penerima, dalam pendengar peristiwa elemen yang dapat dijatuhkan, Anda dapat mengambil data yang ditransfer menggunakan dapatkanData() metode:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Blok kode di atas mengambil data dengan tipe data yang sama (teks/polos) yang diatur menggunakan setData() metode sebelumnya. Hal ini memungkinkan Anda untuk mengakses dan memanipulasi data yang ditransfer sesuai kebutuhan dalam konteks elemen yang dapat dijatuhkan.

Kasus Penggunaan untuk Antarmuka Seret dan Lepas

Mengintegrasikan fungsionalitas drag-and-drop ke dalam aplikasi web Anda dapat menjadi peningkatan yang hebat, namun penting untuk memahami kapan dan mengapa Anda harus menerapkannya.

• Pengunggah File: Mengizinkan pengguna menyeret file langsung dari desktop atau pengelola file ke area pelepasan yang ditentukan akan menyederhanakan proses pengunggahan.
• Daftar yang Dapat Diurutkan: Jika aplikasi Anda melibatkan daftar item, seperti daftar tugas, daftar putar, atau galeri gambar, pengguna mungkin menghargai kemampuan untuk menyusun ulang item melalui drag dan drop.
• Dasbor Interaktif: Untuk visualisasi data dan alat pelaporan, seret dan lepas dapat menjadi cara yang ampuh bagi pengguna untuk menyesuaikan dasbor mereka dengan mengatur ulang widget dan bagan.

Memperhatikan Aksesibilitas

Meskipun drag and drop dapat menarik secara visual dan meningkatkan pengalaman pengguna, penting untuk memastikan penerapan Anda tetap dapat diakses oleh semua pengguna, termasuk penyandang disabilitas. Berikan metode interaksi alternatif, seperti kontrol keyboard, untuk menjadikan aplikasi Anda inklusif.