Drag And Drop In Angular 7

Hallo,

Pada kesempatan kali ini penulis akan menjelaskan cara untuk pembuatan drag and drop pada Angular 7. Yang dibutuhkan pertama adalah anda telah menginstall Angular 7, atau upgrade ke Angular 7.

Buat project baru & component baru dengan command ‘ng new nama_file’ & ‘ng generate component nama_component’. Pada file .ts component tersebut lakukan import CdkDragDrop & moveItemInArray.

Untuk test, buat array hardcode seperti gambar dibawah.

Disini dibuat function seperti dibawah.

Untuk bagian HTML pada bagian div diberi tag ‘cdkDropList’ dan memanggil function yang sudah dibuat tadi (‘drop’) dengan tag ‘(cdkDropListDropped)’ dengan parameter ‘$event’.

Dapat diperhatikan di console log bahwa object 'Test 1', sebelumnya ada pada index ke-0(nol/zero), setelah dipindah, 'Test 1' berubah menjadi index ke-1, dan 'Test 2' menjadi index ke-0(nol/zero). 

Demikian yang bisa penulis jelaskan. Mohon maaf jika bahasa yang digunakan penulis sulit untuk dimengerti.

Terimakasih.