Drag and Drop Image Javascript

Pembukaan

Halo teman-teman, kembali lagi bersama tutorial web design. Hari ini, kita akan belajar 1 tutorial yang sangat simple, yaitu drag and drop image ke web kita. Mari kita langsung pelajari saja ya.

Pertama, mari kita buat dulu index.html nya.
- Disini, kita membuat 1 div container yang akan menampung hasil dari image yang di drop dan dic yang akan menjadi “drop” area dari image kita.
Kemudian, mari kita memberi sedikit style pada div kita dengan css untuk mempercantik div nya. Ini adalah isi dari style.css kita.
Nah, sekarang kita akan coding javascriptnya.
- Pertama, tambahkan dulu coding berikut
  
  window.onload = init();
  - Baris perintah ini akan dijalankan ketika web kita di load. Jadi, di function init lah kita akan coding tentang drag n drop nya.
- Sekarang, kita buat function init
  - Pertama, kita masukkan dulu ke dalam variable, div yang akan menjadi “drop” area kita, karena nanti div ini akan diberikan event listener.
  - Kemudian, kita definisikan event-event yang akan di berikan pada “drop” area kita. Disini saya membaginya menjadi 3 variable yang sesuai dengan kategori nya.
    - arrPrevent = event-event yang ada di dalam array ini nantinya akan kita hilangkan behaviour default dari element tersebut dan juga mencegah event-event dari parent dari element tersebut untuk di eksekusi.
    - arrDrag = event yang terjadi ketika kita mendrag image ke dalam “drop” area kita.
    - arrDrop = event yang terjadi ketika kita mendrop image ke dalam “drop” area kita.
  - Lalu, kita akan menlooping event-event tadi dan diberikan perintah ketika event-event tersebut terjadi.
    - e.preventDefault() adalah untuk mencegah behavior atau sifat asli dari element tersebut tereksekusi.
    - e.stopPropagation() adalah untuk mencegah behavior dari parent dari element tersebut tereksekusi
    - classList.add(‘is-drag’) adalah untuk menambahkan class ‘is-drag’ di div “drop” area kita yang akan menandakan kalau sedang terjadi “drag” image.
    - classList.remove(‘is-drag’) adalah untuk menhilangkan class ‘is-drag’ di div “drop” area kita yang menandakan bahwa tidak terjadi “drag” image lagi.
    - e.dataTransfer.files[0] adalah untuk mengambil data dari image yang di “drop”.
    - Lalu, kita akan menampilkan image yang di drop dengan function previewPhoto(droppedImage) dengan menyertakan variable dari image ynag telah di “drop”.
- function previewPhoto(image)
  - Jadi, di function ini, kita akan menampilkan image yang di “drop”.
  - Disini, kita akan memasukkan data dari image yang di “drop” ke image yang kita buat dengan javascript.
  - Lalu, kita akan menambahkan image tersebut ke div image kita yang akan menjadi div untuk menampilkan image kita.
  - Tapi, sebelumnya kita mencek dulu apakah div tersebut sudah punya image dengan function hasChildNodes(), jika ya, kita remove dengan function removeChild()
  - Kemudian, kita akan menggunakan FileReader untuk “read” image yang kita “drop”
    - Jadi, ketikan FileReader di load, akan memasukkan data dari image yang di “drop” ke image yang telah kita bikin dengan javascript.
  - reader.readAsDataURL() adalah function dari javascript yang akan membaca content dari sebuah Bolb atau File.
    - Kita menyertakan variable image yang adalah image yang di “drop”.