Efek Menyeret Keluar Area HTML Menggunakan Atribut OnDragLeave
 |
| Ilustrasi Atribut OnDragLeave HTML |
Tag Pendukung: atribut ini didukung penggunaannya oleh segala elemen pada html.
<element ondragleave = "script">
Value Atribut: atribut event ondragleave mengandung script nilai tunggal yang dapat bekerja ketika event ondragleave tersebut dipanggil.
Catatan: gambar dan link secara default dapat di-drag.
<!DOCTYPE HTML>
<html>
<head>
<title>
atribut event ondragleave
</title>
<style>
.droptarget
{
width: 250px;
height: 100px;
margin: 15px;
padding: 5px;
border: 2px solid black;
color:Green;}
</style>
<script>
/* Fungsi untuk memulai
konten drag */
function dragStart(event)
{
event.dataTransfer.setData("Text", event.target.id);
}
/* Fungsi untuk
event dragenter */
function dragEnter(event)
{
if ( event.target.className == "droptarget" )
{event.target.style.border = "2px solid green";
document.getElementById("demo").innerHTML =
"Dropzone";}
}
/* Fungsi untuk
event dragleave */
function dragLeave(event)
{if ( event.target.className == "droptarget" )
{event.target.style.border = "";
document.getElementById("demo").innerHTML =
"Out of Dropzone";}
}
/* Fungsi untuk
mengizinkan konten di-drop */
function allowDrop(event)
{event.preventDefault();}
/* Fungsi untuk drop konten */
function drop(event)
{event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));}
</script>
</head>
<body>
<center>
<h1>
Drag elemen diantara kotak
</h1>
<!-- event Drag and drop
event dimulai dengan
event ondragleave -->
<div
class = "droptarget"
ondrop = "drop(event)"
ondragenter = "dragEnter(event)"
ondragleave = "dragLeave(event)"
ondragover = "allowDrop(event)">
<h1
ondragstart = "dragStart(event)"
draggable = "true"
id = "dragtarget">
Blog Elfan
</h1>
</div>
<div
class = "droptarget"
ondragenter = "dragEnter(event)"
ondragleave = "dragLeave(event)"
ondrop = "drop(event)"
ondragover = "allowDrop(event)">
</div>
<!-- event Drag and
drop selesai -->
<p style="clear:both;"></p>
<p id="demo"></p>
</center>
</body>
</html>
Drag elemen diantara kotak
Blog Elfan
- 2 Contoh Penggunaan Atribut OnCut pada Elemen HTML [klik]
- 3 Cara Mengaktifkan Atribut OnPaste pada Elemen HTML [klik]
- 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]
Apa yang dimaksud dengan atribut ondragleave pada elemen html?
BalasHapusAtribut ondragleave adalah atribut yang bekerja ketika elemen yang telah di drag atau diseret ke lokasi lain pada html, kemudian dikeluarkan dari elemen yang telah dipindahkan tersebut.
HapusJenis browser apa saja yang dapat digunakan untuk mengaktifkan atribut ondragleave pada elemen html?
BalasHapusBeberapa browser populer yang dapat digunakan untuk mengaktifkan atribot ondragleave pada halaman html adalah:
Hapus1. Google Chrome 4.0
2. Internet Explorer 9.0
3. Mozilla Firefox 3.5
4. Safari 6.0
5. Opera 12.0
Kapan atribut ondragleave dapat digunakan pada elemen html?
BalasHapusKetika membutuhkan suatu pengkondisian pada elemen yang dapat didrag, yang kondisinya terjadi ketika elemen yang di drop keluar dari jangkauan drag.
Hapus