Atribut OnDragStart HTML dan Fungsinya
 |
| Ilustrasi Atribut OnDragStart HTML |
Proses drag and drop terdiri dari banyak operasi, yaitu:
Operasi yang Digunakan untuk Drag Target.
- ondrag - digunakan ketika elemen akan di-drag.
- ondragstart - digunakan ketikan user mulai untuk melakukan drag elemen.
- ondragend - digunakan ketika user telah selesai melakukan drag elemen.
- ondrop - digunakan ketika elemen yang di-drag kemudian drop atau dijatuhkan pada target tertentu.
- ondragover - digunakan ketika elemen drag telah selesai melakukan drop target.
- ondragleave - digunakan ketika elemen drag telah meninggalkan dari target drop.
- ondragenter - digunakan ketika elemen drag memasuki target drop.
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget
{
float: CENTRE;
width: 150px;
height: 45px;
margin: 25px;
padding: 15px;
border: 2px solid LIGHTGREEN;
}
</style>
</head>
<body>
<p>
Drag teks diantara kotak.
</p>
<div
class="droptarget"
ondrop="drop(event)"
ondragover="allowDrop(event)">
<!-- ondragstart script -->
<p
ondragstart="dragStart(event)"
ondrag="dragging(event)"
draggable="true"
id="dragtarget">
PRESS & DRAG
</p>
</div>
<div
class="droptarget"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<p id="demo"></p>
<script>
function dragStart(event)
{event.dataTransfer.setData(
"Text", event.target.id);}
function dragging(event)
{document.getElementById(
"demo").innerHTML = "Dragging";}
function allowDrop(event)
{event.preventDefault();}
function drop(event)
{event.preventDefault();
var data =
event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById(
"demo").innerHTML =
"Dropped";}
</script>
</body>
</html>
Drag teks diantara kotak.
PRESS & DRAG
- 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]
- Penggunaan Method removeNamedItem() DOM pada HTML [klik]
Apa yang dimaksud dengan atribot ondragstart pada elemen html?
BalasHapusAtribut ondragstart diaktifkan ketika use mulai menyeret elemen atau teks seleksi.
HapusAtribut ini hanyalah proses yang terjadi dimana user menekan teks atau elemen yang ingin digunakan untuk menarik dan melepaskannya ke lokasi yang berbeda.
HapusJenis browser apa saja yang dapat digunakan untuk mengaktifkan atribot ondragstart pada eleme html?
BalasHapusBeberapa jenis browser populer yang dapat digunakan untuk mengaktifkan atribot ondragstart pada eleme html, adalah sebagai berikut:
Hapus1. Chrome 4.0
2. Firefox 3.5
3. Safari 6.0
4. Opera 12.0
5. Internet Explorer 9.0