Artikel Terbaru

2 Contoh Penggunaan Properti Cookie DOM pada HTML

Hampir setiap website selalu menggunakan cookies pada setiap komputer user untuk mengenali dan menjaga pola atau rute dari suatu referensinya. Properti DOM cookies diatur untuk mendapatkan semua nilai atau key yang cocok terhadap cookies yang berasosiasi dengan dokumen saat ini.

Cara Menggunakan Atribut Event OnDrop pada Elemen HTML

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.

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

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

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>

Output:

Drop image menuju ke segi empat:



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

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

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.

POIN 6, Jika ada pihak ketika yang ingin memasang iklan pada blog ini secara langsung, maka dapat menghubungi pemilik blog melalui kontak 0882 3218 8316.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

Perbedaan Antara int main() dan int main(void) pada Bahasa C

3 Jenis Utama Looping pada Java

Penjelasan Singkat tentang Konsep Asosiasi, Komposisi, dan Agregasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya