JavaScript Academy · Pelajaran

Umpan Balik Visual Saat Menyeret

Tata gaya elemen selama operasi penyeretan.

Umpan Balik Visual Saat Menyeret adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Alasan Umpan Balik Visual Penting

Seret dan lepas yang baik memberi tahu pengguna apa yang sedang terjadi: item mana yang dipindahkan, di mana item dapat ditempatkan, dan apakah pelepasan valid. Tanpa umpan balik, interaksi terasa rusak.

Memberi Gaya pada Item yang Diseret

Buat sumber tampak redup atau ubah skalanya saat dragstart agar pengguna dapat melihat item yang dipilihnya.

item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));

Peristiwa Saat Memasuki Target

dragenter terjadi saat item yang diseret memasuki target potensial. Gunakan peristiwa ini untuk menyoroti zona tersebut.

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
  zone.classList.add("drag-over");
});

Peristiwa Saat Meninggalkan Target

dragleave terjadi saat item meninggalkan target. Hapus sorotan di sini.

zone.addEventListener("dragleave", () => {
  zone.classList.remove("drag-over");
});

Masalah Kedipan

dragenter/dragleave juga terjadi pada elemen anak sehingga menyebabkan kedipan. Penghitung atau pemeriksaan relatedTarget menjaga sorotan tetap stabil.

let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });

Mengatur Ulang Saat Pelepasan

Selalu hapus status sorotan di penangan drop, karena dragleave mungkin tidak terjadi saat pelepasan berhasil.

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  depth = 0;
  zone.classList.remove("drag-over");
});

Menyesuaikan Gambar Seret

setDragImage(element, offsetX, offsetY) dalam dragstart mengganti ghost bawaan dengan elemen apa pun.

item.addEventListener("dragstart", (e) => {
  const ghost = document.getElementById("custom-ghost");
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

Kursor melalui dropEffect

Kursor (tanda tambah untuk menyalin, panah untuk memindahkan, atau simbol tidak dapat dilepas) dikendalikan oleh dropEffect, yang ditetapkan pada dragover. Tolak pelepasan yang tidak valid dengan "none".

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});

Menampilkan Pengganti Pelepasan

Dalam daftar yang dapat diurutkan, sisipkan elemen pengganti pada posisi pelepasan yang diperkirakan agar pengguna dapat melihat dengan tepat di mana item akan ditempatkan.

function showPlaceholder(beforeEl) {
  list.insertBefore(placeholder, beforeEl);
}

Menghitung Posisi Penyisipan

Bandingkan koordinat Y penunjuk dengan titik tengah vertikal setiap item untuk menentukan apakah item akan dilepas sebelum atau sesudahnya.

function getAfterElement(container, y) {
  const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
  return items.find((el) => {
    const box = el.getBoundingClientRect();
    return y < box.top + box.height / 2;
  });
}

Umpan Balik yang Aksesibel

Petunjuk visual saja mengecualikan pengguna papan ketik dan pembaca layar. Padukan seret dan lepas dengan pengumuman langsung ARIA serta alternatif papan ketik demi aksesibilitas.

Pemeriksaan Singkat

Uji umpan balik visual.

Rangkuman: Umpan Balik Visual

Anda memberi gaya pada item yang diseret, menyoroti zona dengan dragenter/dragleave, mengatasi kedipan dengan penghitung kedalaman, menyesuaikan gambar seret, mengendalikan kursor melalui dropEffect, dan menampilkan pengganti pelepasan. Berikutnya: menyeret berkas.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Umpan Balik Visual Saat Menyeret” gratis?

Ya — teks lengkap “Umpan Balik Visual Saat Menyeret” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Umpan Balik Visual Saat Menyeret”?

Tata gaya elemen selama operasi penyeretan. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Umpan Balik Visual Saat Menyeret” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy