JavaScript Academy · Pelajaran

Membuat Elemen Dapat Diseret

Aktifkan penyeretan dan tangani peristiwa seret.

Membuat Elemen Dapat Diseret adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

API Seret dan Lepas HTML

API Seret dan Lepas bawaan memungkinkan pengguna mengambil elemen lalu meletakkannya di tempat lain. API ini digerakkan oleh kejadian: elemen sumber memicu kejadian seret, sedangkan target pelepasan memicu kejadiannya sendiri. Tidak diperlukan pustaka.

Atribut draggable

Secara bawaan, hanya tautan dan gambar yang dapat diseret. Tambahkan draggable="true" agar elemen apa pun dapat diseret.

<div draggable="true" id="card">Drag me</div>

Mengatur draggable dalam JS

Anda dapat mengubah perilaku ini dari skrip melalui properti draggable.

const card = document.getElementById("card");
card.draggable = true;

Kejadian dragstart

dragstart dijalankan saat seretan dimulai. Di sinilah Anda mencatat apa yang sedang diseret.

card.addEventListener("dragstart", (e) => {
  console.log("Started dragging", card.id);
});

Membawa Data dengan dataTransfer

Kejadian tersebut menyediakan dataTransfer. Gunakan setData(format, value) dalam dragstart untuk melampirkan muatan yang ikut berpindah selama seretan.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

Kejadian drag

drag dijalankan terus-menerus selama elemen bergerak. Gunakan seperlunya — kejadian ini dapat dijalankan berkali-kali dalam satu detik.

card.addEventListener("drag", (e) => {
  // fires repeatedly during the drag
});

Kejadian dragend

dragend dijalankan saat pengguna melepaskan elemen, terlepas dari berhasil atau tidaknya pelepasan. Gunakan kejadian ini untuk mengatur ulang gaya sumber.

card.addEventListener("dragend", (e) => {
  card.classList.remove("dragging");
});

Menandai Elemen Sumber

Pola yang umum adalah menambahkan class saat dragstart dan menghapusnya saat dragend untuk meredupkan atau menyoroti item yang diseret.

card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));

Efek yang Diizinkan

Atur effectAllowed dalam dragstart untuk menyatakan operasi yang valid: "copy", "move", "link", atau kombinasinya.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.effectAllowed = "move";
});

Catatan tentang Perangkat Layar Sentuh

API bawaan memiliki dukungan layar sentuh yang terbatas di perangkat seluler. Untuk aplikasi yang mengutamakan layar sentuh, pertimbangkan Pointer Events atau pustaka khusus; API bawaan lebih unggul di komputer desktop.

Menonaktifkan Pemilihan Teks

Menyeret elemen dapat secara tidak sengaja memilih teks. Aturan CSS sederhana dapat menjaga seretan tetap rapi.

/* CSS */
.draggable { user-select: none; }

Pemeriksaan Cepat

Uji dasar-dasar draggable.

Rangkuman: Membuat Elemen Dapat Diseret

Anda telah mengaktifkan penyeretan dengan draggable="true", menangani dragstart/drag/dragend, melampirkan muatan melalui dataTransfer.setData, mengatur effectAllowed, dan memberi gaya pada sumber. Selanjutnya: target pelepasan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Elemen Dapat Diseret” gratis?

Ya — teks lengkap “Membuat Elemen Dapat Diseret” 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 “Membuat Elemen Dapat Diseret”?

Aktifkan penyeretan dan tangani peristiwa seret. 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 1 dari 4.

Berapa lama pelajaran “Membuat Elemen Dapat Diseret” 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