DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Atribut Event OnDrop HTML dan Fungsinya

Atribut event ondrop pada html digunakan untuk drag elemen atau teks dan menjatuhkannya ke lokasi atau target drop yang sesuai. Fitur drag and drop merupakan fitur yang umum digunakan pada html5.

Cara Menggunakan Atribut Event OnDrop pada Elemen HTML
Ilustrasi Atribut Event OnDrop HTML

Catatan: Secara default, image dan link adalah elemen yang dapat dilakukan drag.

Terdapat beberapa event yang berbeda yang digunakan dan muncul sebelum event ondrop.

Baca Juga:

Tag Pendukung: atribut ini didukung penggunannya oleh segala jenis elemen pada html.

Event yang muncul pada drag target: berikut adalah daftar event yang digunakan untuk melakukan drag elemen pada html.
  • ondragstart - event ini digunakan ketika user memulai untuk drag elemen.
  • ondrag - event ondrag digunakan untuk melakukan drag elemen.
  • ondragend - event ini digunakan untuk menyelesaikan proses drag dari elemen.

Event yang muncul pada target drop: berikut adalah daftar event yang digunakan untuk melakukan drop elemen pada html.
  • ondragenter - event ini digunakan untuk melakukan drag pada elemen dan memasukkannya ke target drop yang sesuai.
  • ondragover - event ini digunakan ketika elemen drag telah selesai melakukan drop pada lokasi.
  • ondragleave - event ini muncul ketika elemen drag telah meninggalkan target drop.
  • ondrop - event ini muncul ketika elemen drag telah melakukan drop pada target yang sesuai.

Contoh:

<!DOCTYPE HTML>

<html>

 

<head>

<title>

Atribut Event Ondrop pada HTML

</title>

 

<style>

/* Properti CSS untuk membuat 

kotak */

#kotak {

width: 220px;

height: 120px;

padding: 15px;

border: 3px solid #4cb96b;}

</style>

 

<script>

/* script untuk memberikan 

izin drop ke elemen */

function allowDrop(gg

{gg.preventDefault();}

 

/* script untuk melakukan drag 

elemen */

function drag(gg

{gg.dataTransfer.setData("text", gg.target.id);}

 

/* script untuk drop elemen */

function drop(gg

{gg.preventDefault();

var data = gg.dataTransfer.getData("text");

gg.target.appendChild(document.getElementById(data));}

</script>

</head>

 

<body>

 

<p>

Drop image menuju ke segi empat:

</p>

 

<!-- event drop dipanggil -->

<div 

id = "kotak" 

ondrop = "drop(event)"

ondragover = "allowDrop(event)">

</div>

 

<br>

 

<img 

id = "ktk" 

src ="https://1.bp.blogspot.com/-NPazO99iFiA/YVh5SifERWI/AAAAAAAAOQg/rZXzixImaAQtM_2sAK58YUKPsqpKouW8gCK4BGAYYCw/s35/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

draggable = "true" 

ondragstart = "drag(event)

alt = "" />

 

</body>

 

</html>


Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan atribut ondrop pada elemen html?

    BalasHapus
    Balasan
    1. Beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan atribut ondrop pada elemen html adalah:
      1. Google Chrome 4.0
      2. Internet Explorer 9.0
      3. Firefox 3.5
      4. Safari 6.0
      5. Opera 12.0

      Hapus
  2. Apa yang dimaksud dengan atribut ondrop pada elemen html?

    BalasHapus
    Balasan
    1. Atribut ondrop merupakan atribut yang dapat diaktifkan ketika elemen dragabble atau teks seleksi dijatuhkan atau di drop pada salah satu target penurunan yang bernilai valid.

      Hapus
  3. Apa tujuan dari penggunaan atribut ondrop pada elemen html?

    BalasHapus
    Balasan
    1. Atribut event ondrop digunakan untuk menyeret elemen atau teks dan menjatuhkannya ke lokasi target yang dapat dijatuhkan dengan nilai yang valid.

      Hapus

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

~ Ikatlah Ilmu dengan Memostingkannya ~

Postingan populer dari blog ini (30 Hari)

Enkapsulasi Java dan Fungsinya

Specifier %d dan %i Bahasa C dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

7 Paradigma Penelitian pada Statistika Penelitian

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas