Atribut Event OnDrop HTML dan Fungsinya
 |
| Ilustrasi Atribut Event OnDrop HTML |
Terdapat beberapa event yang berbeda yang digunakan dan muncul sebelum event ondrop.
Tag Pendukung: atribut ini didukung penggunannya oleh segala jenis 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.
<!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>
- Cara Mudah Menggunakan Atribut OnToggle pada HTML [klik]
- Cara Menggunakan Method DOM getNamedItem() pada HTML [klik]
- Cara Mudah Menggunakan Properti isID DOM pada HTML [klik]
- Cara Penggunaan Method item() DOM pada HTML [klik]
- Penggunaan Properti Length DOM pada HTML [klik]
- Penggunaan Method removeNamedItem() DOM pada HTML [klik]
- Cara Penggunaan Method setNamedItem() DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan atribut ondrop pada elemen html?
BalasHapusBeberapa jenis browser populer yang dapat digunakan untuk mengaktifkan atribut ondrop pada elemen html adalah:
Hapus1. Google Chrome 4.0
2. Internet Explorer 9.0
3. Firefox 3.5
4. Safari 6.0
5. Opera 12.0
Apa yang dimaksud dengan atribut ondrop pada elemen html?
BalasHapusAtribut ondrop merupakan atribut yang dapat diaktifkan ketika elemen dragabble atau teks seleksi dijatuhkan atau di drop pada salah satu target penurunan yang bernilai valid.
HapusApa tujuan dari penggunaan atribut ondrop pada elemen html?
BalasHapusAtribut event ondrop digunakan untuk menyeret elemen atau teks dan menjatuhkannya ke lokasi target yang dapat dijatuhkan dengan nilai yang valid.
Hapus