Tutorial

Cara Membuat Efek Seret dan Letakkan dengan JavaScript Vanilla dan HTML

JavaScript

Pengantar

Menyeret-dan-meletakkan adalah interaksi pengguna umum yang dapat Anda temukan dalam banyak antarmuka pengguna.

Ada beberapa pustaka JavaScript yang sudah ada untuk menambahkan fitur seret-dan-letakkan ke aplikasi Anda. Namun, mungkin ada situasi ketika pustaka tidak tersedia atau menimbulkan overhead atau dependensi yang tidak diperlukan proyek Anda. Dalam situasi ini, pengetahuan API yang tersedia untuk Anda di peramban web modern dapat menawarkan solusi alternatif.

HTML Drag and Drop API bergantung pada model kejadian DOM untuk mengambil informasi tentang apa yang sedang diseret atau diletakkan serta memperbarui elemen itu saat menyeret atau meletakkan. Dengan penangan kejadian JavaScript, Anda dapat mengubah elemen apa saja menjadi item yang dapat diseret atau item yang dapat diletakkan ke dalamnya.

Dalam tutorial ini, kita akan membuat contoh seret-dan-letakkan menggunakan HTML Drag and Drop API bersama JavaScript vanilla untuk menggunakan penangan kejadian.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda akan memerlukan:

  • Peramban web modern yang mendukung Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

Langkah 1 — Membuat Proyek dan Markup Awal

Proyek kita akan terdiri dari kontainer dengan dua tipe elemen anak:

  • Elemen anak yang dapat Anda seret
  • Elemen anak yang dapat memiliki elemen yang diletakkan ke dalamnya

Pertama, buka jendela terminal Anda dan buat direktori proyek baru:

  • mkdir drag-and-drop-example

Selanjutnya, navigasikan ke direktori itu:

  • cd drag-and-drop-example

Kemudian, buat berkas index.html dalam direktori itu:

  • nano index.html

Selanjutnya, tambahkan kode boilerplate untuk halaman web HTML:

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>My Drag-and-Drop Example</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  </body>
</html>

Lalu, di antara tag <body> tambahkan item draggable dan dropzone (target peletakan):

index.html
<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

Simpan dan tutup berkas. Kemudian, buat berkas style.css:

  • nano style.css

Selanjutnya, tambahkan gaya untuk elemen dalam berkas index.html:

style.css
.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.example-origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.example-draggable {
  background-color: #4AAE9B;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: #6DB65B;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

Ini akan menambahkan beberapa pemformatan pada aplikasi. Sekarang Anda dapat melihat index.html di peramban dan mengamati bahwa ini menghasilkan draggable <div> dan dropzone <div>.

Tangkapan layar draggable div dan dropzone div

Selanjutnya, kita secara eksplisit akan membuat <div> pertama yang dapat diseret dengan menambahkan atribut draggable:

index.html
<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
  >
    dropzone
  </div>
</div>

Simpan dan tutup berkas.

Terakhir, lihat lagi index.html di peramban. Jika kita mengklik draggable <div> dan menyeretnya di layar, akan ada indikasi visual yang bergerak.

Nilai asali untuk atribut draggable adalah auto. Artinya, perilaku asali peramban Anda akan menentukan apakah elemen dapat diseret atau tidak. Biasanya, ini berarti pemilihan teks, gambar, dan tautan dapat diseret tanpa menetapkan draggable="true".

Kini Anda memiliki berkas HTML dengan elemen yang dapat diseret. Kita lanjutkan dengan menambahkan penangan onevent.

Langkah 2 — Menangani Kejadian Seret-dan-Letakkan dengan JavaScript

Saat ini, jika kita melepaskan mouse saat menyeret elemen yang dapat diseret, tidak ada yang terjadi. Untuk memicu tindakan pada penyeretan atau peletakan di elemen DOM, kita perlu menggunakan Drag and Drop API:

  • ondragstart: Penangan kejadian ini akan dipasang ke elemen draggable kita dan aktif bila ada kejadian dragstart.
  • ondragover: Penangan kejadian ini akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian dragover.
  • ondrop: Penangan kejadian ini juga akan dipasang ke elemen dropzone kita dan aktif bila ada kejadian drop.

Catatan: Seluruhnya ada delapan penangan kejadian: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, dan ondrop. Untuk contoh, kita tidak akan memerlukan semuanya.

Pertama, mari kita merujuk berkas script.js baru dalam index.html:

index.html
<body>
  ...
  <script src="script.js"></script>
</body>

Selanjutnya, buat berkas script.js yang baru:

  • nano script.js

Objek DataTransfer akan terus melacak informasi terkait penyeretan yang terjadi saat ini. Untuk memperbarui elemen kita saat menyeret dan meletakkan, kita perlu mengakses langsung objek DataTransfer. Caranya, kita dapat memilih properti dataTransfer dari DragEvent elemen DOM.

Catatan: Objek DataTransfer secara teknis dapat melacak informasi untuk beberapa elemen yang sedang diseret secara bersamaan. Untuk contoh, kita akan fokus pada penyeretan satu elemen.

Metode setData objek dataTransfer dapat digunakan untuk mengatur informasi status penyeretan pada elemen yang diseret saat ini. Dibutuhkan dua parameter:

  • string yang mendeklarasikan format parameter kedua
  • data sebenarnya yang ditransfer

Tujuan kita adalah memindahkan elemen draggable ke elemen induk baru. Kita harus dapat memilih elemen draggable dengan id unik. Kita dapat mengatur id elemen yang diseret dengan metode setData sehingga dapat digunakan nanti.

Mari kita tinjau kembali berkas script.js dan membuat fungsi baru untuk menggunakan setData:

script.js
function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);
}

Catatan: Internet Explorer 9 hingga 11 dilaporkan mengalami masalah saat menggunakan 'text/plain'. Formatnya harus 'text' untuk peramban itu.

Untuk memperbarui penataan gaya CSS item yang diseret, kita dapat mengakses gayanya menggunakan kejadian DOM lagi dan mengatur gaya apa pun yang kita inginkan untuk currentTarget.

Mari kita tambahkan ke fungsi dan ubah backgroundColor menjadi yellow:

script.js
function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor = 'yellow';
}

Catatan: Gaya yang Anda ubah perlu diperbarui lagi secara manual saat peletakan jika Anda ingin gaya seret-saja. Jika Anda mengubah sesuatu saat mulai menyeret, elemen yang diseret akan mempertahankan gaya baru itu kecuali jika Anda mengubahnya kembali.

Sekarang, kita memiliki fungsi JavaScript untuk saat penyeretan dimulai.

Kita dapat menambahkan ondragstart ke elemen draggable di index.html:

index.html
<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div class="example-dropzone">
    dropzone
  </div>
</div>

Lihat index.html di peramban Anda. Jika Anda mencoba menyeret item sekarang, penataan gaya yang dideklarasikan dalam fungsi kita akan diterapkan:

Gif beranimasi yang menggambarkan elemen yang diseret tetapi tidak diletakkan

Namun, tidak akan terjadi apa pun saat Anda melepaskan klik.

Penangan kejadian selanjutnya yang akan terpicu dalam urutan ini adalah ondragover.

Perilaku peletakan asali untuk elemen DOM tertentu seperti <div> di peramban biasanya tidak menerima peletakan. Perilaku ini akan mencegat perilaku yang berusaha kita implementasikan. Untuk memastikan kita mendapatkan perilaku peletakan yang diinginkan, kita akan menerapkan preventDefault.

Mari kita kembali ke berkas script.js dan membuat fungsi baru untuk menggunakan preventDefault. Tambahkan kode ini ke akhir berkas:

script.js
function onDragOver(event) {
  event.preventDefault();
}

Sekarang, kita dapat menambahkan ondragover ke elemen dropzone di index.html:

index.html
<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
  >
    dropzone
  </div>
</div>

Di titik ini, kita masih belum menulis kode yang menangani peletakan sesungguhnya. Penangan kejadian akhir yang akan terpicu dalam urutan ini adalah ondrop.

Mari kita kembali ke berkas script.js dan membuat fungsi baru.

Kita dapat merujuk data yang kita simpan sebelumnya dengan metode setData objek dataTransfer. Kita akan menggunakan metode getData objek dataTransfer. Data yang kita atur adalah id, jadi itulah yang akan dikembalikan kepada kita:

script.js
function onDrop(event) {
  const id = event
    .dataTransfer
    .getData('text');
}

Pilih elemen draggable dengan id yang kita ambil:

script.js
function onDrop(event) {
  // ...

  const draggableElement = document.getElementById(id);
}

Pilih elemen dropzone:

script.js
function onDrop(event) {
  // ...

  const dropzone = event.target;
}

Tambahkan elemen draggable ke dropzone:

script.js
function onDrop(event) {
  // ...

  dropzone.appendChild(draggableElement);
}

Atur ulang objek dataTransfer kita:

script.js
function onDrop(event) {
  // ...

  event
    .dataTransfer
    .clearData();
}

Sekarang, kita dapat menambahkan ondrop ke elemen dropzone di index.html:

index.html
<div class="example-parent">
  <div class="example-origin">
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      draggable
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    dropzone
  </div>
</div>

Setelah itu selesai, kita memiliki fitur seret-dan-letakkan lengkap. Lihat index.html di peramban Anda dan seret elemen draggable ke dropzone.

Gif beranimasi yang menggambarkan elemen yang diseret dan diletakkan ke dalam target peletakan

Contoh kita menangani skenario dari item tunggal yang dapat diseret dan target peletakan tunggal. Anda dapat memiliki beberapa item yang dapat diseret, beberapa target peletakan, dan menyesuaikannya dengan semua penangan kejadian Drag and Drop API lainnya.

Langkah 3 — Membuat Contoh Lanjutan dengan Beberapa Item yang Dapat Diseret

Berikut ini satu lagi contoh cara menggunakan API ini: daftar agenda berisi beberapa tugas yang dapat diseret yang dapat Anda pindahkan dari kolom "To-do" ke kolom "Done".

Gif beranimasi yang menggambarkan beberapa tugas To-do yang diseret dan diletakkan ke dalam kolom Done

Untuk membuat daftar agenda sendiri, tambahkan lagi elemen yang dapat diseret dengan id unik ke index.html:

index.html
<div class="example-parent">
  <h1>To-do list</h1>
  <div class="example-origin">
    To-do
    <div
      id="draggable-1"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 1
    </div>
    <div
      id="draggable-2"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 2
    </div>
    <div
      id="draggable-3"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 3
    </div>
    <div
      id="draggable-4"
      class="example-draggable"
      draggable="true"
      ondragstart="onDragStart(event);"
    >
      thing 4
    </div>
  </div>

  <div
    class="example-dropzone"
    ondragover="onDragOver(event);"
    ondrop="onDrop(event);"
  >
    Done
  </div>
</div>

Lihat index.html di peramban Anda dan seret item di kolom To-do ke kolom Done. Anda telah membuat aplikasi agenda dan menguji fungsionalitasnya.

Kesimpulan

Dalam artikel ini, Anda telah membuat aplikasi agenda untuk mendalami fungsionalitas seret-dan-letakkan yang tersedia di peramban web modern.

Drag and Drop API menyediakan beberapa opsi untuk menyesuaikan tindakan Anda selain menyeret dan meletakkan. Misalnya, Anda dapat memperbarui penataan gaya CSS item yang diseret. Selain itu, alih-alih memindahkan item, Anda dapat menyalin item yang dapat diseret agar direplikasi saat peletakan.

Ingatlah bahwa walaupun banyak peramban web yang mendukung teknologi ini, Anda mungkin tidak dapat bergantung padanya jika audiens Anda terdiri dari perangkat yang tidak mendukung fungsionalitas ini.

Untuk mempelajari lebih lanjut tentang semua yang dapat Anda letakkan dengan Drag and Drop API, lihat dokumentasi MDN tentang hal itu.

Creative Commons License