Efek Melepaskan Klik Mouse HTML Menggunakan Atribut OnDragEnd
 |
| Ilustrasi Atribut OnDragEnd |
Value Atribut: mengandung script atribut tunggal yang akan bekerja ketika event ondragend dipanggil.
Catatan: elemen gambar dan elemen link secara default pada html dapat dilakukan drag.
<!DOCTYPE HTML>
<html>
<head>
<title>
atribut event ondragend
</title>
<style>
.box
{
width: 30%;
height: 50px;
margin:20px;
border: 1px solid black;
text-align:center;
}
</style>
<script>
/* Fungsi untuk memulai
drag */
function starts_drag(event)
{
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML =
"Fungsi Drag Bekerja";
}
/* Fungsi untuk stop drag */
function end_drag(event)
{
document.getElementById("demo").innerHTML =
"Sedang melakukan drag dengan baik";
}
/* Fungsi untuk mengizinkan
drop konten */
function drop_allow(event)
{
event.preventDefault();
}
/* Fungsi untuk drop konten */
function drop_event(event)
{
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<center>
<!-- Event ondragend dimulai
pada baris ini -->
<div
class="box"
ondrop="drop_event(event)"
ondragover="drop_allow(event)">
<p
ondragstart="starts_drag(event)"
ondragend="end_drag(event)"
draggable="true" id="mkn">
Blog Elfan
<p>
</div>
<div
class="box"
ondrop="drop_event(event)"
ondragover="drop_allow(event)">
</div>
<!-- ondragend event
selesai -->
<p id="demo"></p>
</center>
</body>
</html>
Blog Elfan
- Cara Mudah Menggunakan Atribut OnScroll pada Elemen HTML [klik]
- 3 Cara Mengaktifkan Atribut OnCopy pada Elemen HTML [klik]
- 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]
5 komentar untuk "Efek Melepaskan Klik Mouse HTML Menggunakan Atribut OnDragEnd"
Hubungi admin melalui Wa : +62-896-2414-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 -
- Big things start from small things -
apa yang dimaksud dengan atribut ondragend pada elemen html?
BalasHapusAtribut ondragend pada html diaktifkan ketika pengguna telah selesai menyeret elemen atau pemilihan teks tertentu.
HapusEvent ondragend akan terjadi ketika user telah selesai melakukan drag elemen atau pemilihan teks. Drag and drop merupakan fitur yang umum digunakan pada html5, yang dilakukan dengan cara mengambil sebuah objek atau elemen yang kemudian menyeretnya ke lokasi lain pada halam html.
HapusJenis browser apa saja yang dapat digunakan untuk mengaktifkan atribut ondragend pada elemen html?
BalasHapusBerikut adalah beberapa browser yang dapat digunakan untuk mengaktifkan atribut ondragend pada elemen html:
Hapus1. Google Chrome 4.0
2. Internet Explorer 9.0
3. Mozilla Firefox 3.5
4. Safari 6.0
5. Opera 12.0