Hallo sahabat Dumetschool, berjumpa lagi di website kursuswebdesign .Pada kesempatan kali ini saya akan membahas tentang cara membuat drag dan drop menggunakan vuejs. Sahabat tentu pernah melakukan drag atau drop suatu file atau dokument, memindahkan atau menghapus file yang akan di upload. Disini saya akan membuat drag dan drop sederhana pada beberapa list data yang sudah saya siapkan.Baiklah sahabat bisa ikutin langkah pembuatan drag dan drop menggunakan vuejs seperti berikut ini:

Langkah pertama sahabat buka texteditor-nya , sebelumnya saya akan menggunakan beberapa library dari vuejs, bootstrap, sortable, draggable, dan untuk icon saya pakai fontawesome. oke kita lanjut lagi lalu coba sahabat perhatikan script dibawah ini:

Script diatas dipakai untuk library yang digunakan saat ini, dan selanjutnya script untuk membuat tampilanya seperti berikut ini.

Dan langkah berikutnya tambahkan script VueJS dibawah ini sebelum penutup tag body :

Jika sudah diketikan, sekarang coba jalankan pada browser sahabat apakah sudah seperti tampilan berikut ini:

1-Cara Membuat Drag dan Drop Sederhana dengan VueJS

Sekarang saya akan merubah urutannya lalu beberapa daftar saya hapus berikut tampilannya

2-Cara Membuat Drag dan Drop Sederhana dengan VueJS

Dan selanjutnya saya akan menambahkan list baru seperti dalam script diatas pada sebelumnya .

3-Cara Membuat Drag dan Drop Sederhana dengan VueJS      4-Cara Membuat Drag dan Drop Sederhana dengan VueJS

Demikian pembahasan kali ini tentang cara membuat drag dan drop menggunakan vuejs, semoga bermanfaat dan selamat mencoba.

sampai berjumpa kembali dengan artikel selanjutnya. terima kasih

WhatsApp chat