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

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C