Drag and Drop API

Kembali ke skillance.my.id Bursa Freelance

Skillance Academy (Materi Belajar Skillance Academy) Masuk Akun

HTML CSS JavaScript PHP & MySQL SQL jQuery Python Java C++ Vue Flutter UI/UX ROADMAP KIT PROYEK KEMITRAAN KAMPUS CEK SERTIFIKAT

Drag and Drop API

« Sebelumnya Berikutnya »

Fitur Drag and Drop (Tarik dan Lepas) adalah fitur interaktif di mana pengguna dapat mengklik dan menahan suatu elemen, lalu menyeretnya ke wadah lain.

Untuk membuat suatu elemen dapat ditarik, cukup tambahkan atribut draggable="true" pada tag HTML tersebut.

Contoh Sederhana Elemen Draggable:

<!DOCTYPE html>
<html>
<body>

    <h3>Elemen yang Dapat Ditarik</h3>
    <div draggable="true" style="width:150px; padding:15px; background:#0d2e5c; color:white; border-radius:8px; cursor:grab;">
        Tarik Saya! &#9995;
    </div>

</body>
</html>

Coba Sendiri (Try it Yourself) »

Kombinasikan dengan event ondragstart dan ondrop untuk membuat antarmuka papan Kanban atau keranjang belanja belanjaan!

Uji Pemahaman Singkat (Test Yourself):

Atribut HTML apa yang wajib dipasang agar sebuah elemen dapat diseret oleh kursor pengguna?

Selesaikan Topik Ini

Tandai modul selesai untuk mencatat progres akun Anda.

« Sebelumnya Berikutnya »

Selesaikan Topik Ini

HTML Tutorial