Cara menggunakan javascript application

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.

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".

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

index.html

<div class="example-parent">
  <h2>To-do listh2>
  <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.

Bagaimana cara menjalankan JavaScript?

JavaScript pakai aplikasi apa?

Apakah JavaScript bisa untuk mobile?

Apakah JavaScript cocok untuk pemula?