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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Membuat Drag dan Drop Sederhana dengan VueJS</title> <!-- Plugin Tampilan dengan Bootstap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Plugin untuk Icon --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> <!-- Plugin untuk file VueJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <!-- Plugin untuk Sortable dalam list --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.4/Sortable.min.js"></script> <!-- Plugin untuk Drag --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/15.0.0/vuedraggable.min.js"></script> </head> |
Script diatas dipakai untuk library yang digunakan saat ini, dan selanjutnya script untuk membuat tampilanya seperti berikut ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<body> <div class="container"> <div class="row"> <div class="col-md-4 mt-5"><h1>Cara Membuat Drag dan Drop Sederhana dengan VueJS</h1></div> <div class="col-md-4 mt-5"> <div id="daftar"> <button class="btn btn-primary mb-1" @click="insertItem">Tambah List</button> <ul class="list-group drag"> <draggable :list="items" class="dragArea" :options="{handle:'.handle'}"> <li class="list-group-item" v-for="item, index in items" :key="item.no"> <span class="handle" > <i class="fas fa-arrows-alt"></i> </span> <label> {{item.name}} => [{{item.no}}] <i class="fas fa-backspace" @click="deleteItem"></i> </label> </li> </draggable> </ul> </div> </div> <div class="col-md-4"></div> </div> </div> </body> </html> |
Dan langkah berikutnya tambahkan script VueJS dibawah ini sebelum penutup tag body :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<script> var vue = new Vue({ el: "#daftar", data: { items:[ {no:1, name:'Web Master', categoryNo:'1'}, {no:2, name:'Web Programming', categoryNo:'2'}, {no:3, name:'Web Design', categoryNo:'3'}, {no:4, name:'Design Grapich', categoryNo:'4'}, {no:5, name:'Motion Grapich', categoryNo:'5'}, {no:6, name:'Digital Marketing', categoryNo:'6'}, {no:7, name:'Mobile Apps', categoryNo:'7'}, {no:8, name:'Coding For kids', categoryNo:'8'}, ], }, methods:{ onEnd: function(evt){ }, checkMove: function(evt,originalEvent){ console.log('draggedContext', evt.draggedContext); console.log('relatedContext', evt.relatedContext); // I can not drag with an apple return (evt.draggedContext.element.name!=='Apple'); }, insertItem: function(){ var self = this; var newNo = 1; if(self.items.concat().length > 0) newNo = Math.max.apply(null, self.items.concat().map(function(item){return item.no;})) +1; this.items.push( { no: newNo, name:'Kursus Website dan Design Terbaik', categoryNo:'3' } ); self.count = self.count+1; }, deleteItem: function(item, index){ this.items.splice(index, 1); }, } }); </script> |
Jika sudah diketikan, sekarang coba jalankan pada browser sahabat apakah sudah seperti tampilan berikut ini:
Sekarang saya akan merubah urutannya lalu beberapa daftar saya hapus berikut tampilannya
Dan selanjutnya saya akan menambahkan list baru seperti dalam script diatas pada sebelumnya .
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