Lompat ke konten Lompat ke sidebar Lompat ke footer

Efek Menyeret Elemen HTML Menggunakan Atribut OnDrag

Atribut event ondrag merupakan salah satu atribut event pada html yang dapat berfungsi ketika elemen atau teks yang dipilih kemudiah di drag ke bagian lain pada html. Event ini sangat mirip dengan event drag and drop pada elemen html, dan berupakan salah satu atribut baru yang terdapat pada html5.

Cara Mudah Menggunakan Atribut Event OnDrag pada HTML
Atribut Event OnDrag HTML

Sebelum memahami lebih dalam materi tentang Efek Menyeret Elemen HTML Menggunakan Atribut OnDrag, terlebih dahulu pelajari materi tentang: Efek Scroll Mouse HTML Menggunakan Atribut OnWheel [klik], Efek Melepaskan Klik Mouse HTML Menggunakan OnMouseUp [klik], dan Efek Menggerakkan Mouse HTML Menggunakan Atribut OnMouseOver [klik].

Tag Pendukung: didukung penggunaannya oleh segala jenis elemen pada html.

Sintak:
<element ondrag = "script">

Value Atribut: mengandung script nilai tunggal yang akan bekerja ketika elemen dilakukan drag oleh pengguna. Atribut ini juga didukung penggunannya oleh segala jenis elemen pada html.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

atribut event ondrag

</title>

 

<style>

#styledrag 

{

border: 1px solid black;

padding:15px;

width:60%;}

 

h1 {

color:green;}

</style>

</head>

 

<body>

<center>

 

<h1>

Blog Elfan

</h1>

 

<h2>

atribut event ondrag

</h2>

 

<div 

id = "styledrag" 

ondrag="Function()">

Blog TIK: Portal ilmu komputer

</div>

 

<script>

function Function() 

{

document.getElementById("styledrag").style.fontSize = "30px";

document.getElementById("styledrag").style.color = "green";

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

atribut event ondrag

Blog TIK: Portal ilmu komputer

Artikel ini didedikasikan kepada: Hendita Irza Permana, Ibanez Alvareza, Muhamad Miftakhul Huda, Nabila Syafitri Mu'In, dan Novia Miftahir Ramadani.

5 komentar untuk "Efek Menyeret Elemen HTML Menggunakan Atribut OnDrag"

  1. Apa yang dimaksud dengan drag pada html?

    BalasHapus
    Balasan
    1. Merupakan proses mengklik dan menyeret salah satu elemen yang terdapat pada halaman html menuju ke bagian lain, kemudian melepaskannya (drop).

      Hapus
  2. Apa yang dimaksud dengan atribut ondrag pada elemen html?

    BalasHapus
    Balasan
    1. Atribut ondrag merupakan atribut yang diaktifkan ketika elemen atau teks seleksi sedang dipilih dan diseret (drag). Drag and drop merupakan fitur yang sangat umum yang terdapat pada html5 yang digunakan untuk mengambil objek pada bagian tertentu dan kemudian memindahkannya kebagian yang lain.

      Hapus
    2. Atribut ondrag memungkinkan aplikasi untuk memberikan event tertentu pada kondisi drag atau sedang diseret. User dapat memilih elemen mana yang dapat diseret dan yang tidak dapat diseret, dan dapat melepaskannya ke bagian lain dengan menggunakan pointer atau mouse.

      Hapus

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 -