Artikel Terbaru

4 Keunggulan Utama Bitcoin

Sebelum membicarakan tentang bitcoin, terlebih dahulu mari pahami apa yang dimaksud dengan uang. Apa sebenarnya yang dimaksud dengan uang? Pada dasarnya, uang adalah segala sesuatu yang mewakili nilai tertentu.

9 Objek (dan 8 Event) dari Penggunaan Drag dan Drop pada HTML

Drag dan drop adalah sebuah konsep interaktif yang yang memudahkan user dalam menggerakkan object dari satu lokasi ke lokasi yang lain dengan cara menyeretnya (drag). Hal ini memungkinkan user untuk melakukan klik dan menahan klik mouse tersebut kemudian membawa elemen yang diseret menuju ke lokasi yang lain, kemudian melepaskan tombol klik mouse untuk menjatuhkan (drop) elemen yang diseret tersebut (drag). Pada HTML 5 drag dan drop lebih mudah untuk membuat bentuk programnya dan juga lebih mudah untuk digunakan.

Event drag dan drop: Terdapat banyak event drag dan drop seperti yang dijelaskan berikut ini:
  • satu, ondragstart; Memanggil sebuah fungsi, drag (event), dengan data spesifik mana yang akan di drag.
  • dua, ondragenter; Untuk memutuskan apakah dilakukan penerimaan atau tidak dari target drop. Jika object drop diterima, maka event ini akan dibatalkan.
  • tiga, ondragleave; Terjadi ketika mouse melepaskan elemen sebelum valid drop target ketika proses drag sedang terjadi.
  • empat, ondragover; Secara spesifik dimana data yang di drag akan dilakukan drop.
  • lima, ondrop; Secara spesifik dimana proses drop telah terjadi ketika operasi drag telah berakhir.
  • enam, ondragend; Terjadi ketika user telah selesai melakukan drag elemen.

Objek transfer data: Properti transfer data digunakan ketika semua proses dari drag dan drop telah terjadi. Properti ini digunakan ketika menahan drag data dari sumber dan drop ke lokasi yang dituju. Terdapat beberapa properti yang berhubungan, yaitu:
  • satu, dataTransfer.setData(format, data); Sekumpulan data yang akan di drag.
  • dua, dataTransfer.clearData(format); Memanggil fungsi dengan no_argument membersihkan semua data. Memanggil dengan format argumen menghapus data tertentu.
  • tiga, dataTransfer.getData(format); Mengembalikan data dari format spesifik. Jika tidak terdapat data apapun, maka mengembalikan nilai string kosong.
  • empat, dataTransfer.types; Properti ini mengembalikan array dari segala format yang telah diatur untuk event dragstart.
  • lima, dataTransfer.file; Digunakan untuk mengembalikan semua file yang telah di drop.
  • enam, dataTransfer.setDraglmage(element, x, y); Digunakan untuk menampilkan gambar yang ada sebagai gambar drag ketimbang menggunakan default image pada cursor. Koordinat menentukan lokasi penurunan.
  • tujuh, dataTransfer.addElement(element); Penambahan elemen spesifik yang akan ditarik sebagai drag feedback image.
  • delapan, dataTransfer.effectAllowed(value); Memberitahu browser bahwa hanya tipe daftar dari operasi yang diijinkan oleh user. Properti dapat diatur sebagai berikut: nonecopycopyLinkcopyMovelinklinkMovemoveall, dan uninitilialized.
  • sembilan, dataTransfer.dropEffect(value); Mengendalikan feedback yang diberikan oleh user selama event dragenter dan dragover. Ketika user membawa elemen target, cursor browser akan mengindikasi tipe apa dari operasi yang akan dijalankan (seperti copymove, dan lain sebagainya). Efek yang diberikan seperti berikut ini: nonecopylinkmove.

Prosedur dari Drag dan Drop:
tahap satu, Membuat objek yang dapat dilakukan drag.
  • pertama, Setting atribut drag bernilai true untuk elemen yang akan dilakukan drag <img draggable="true">.
  • kedua, Tentukan apa yang akan terjadi ketika proses drag dilakukan. Atribut ondragstart akan memanggil sebuah fungsi drag(even) yang akan menentukan data mana yang akan dilakukan dragMethod dataTransfer.setData() mengatur tipe data dan nilai dari data yang di drag.
  • ketiga, Event listener ondragstar akan mengatur efek yang diijinkan (copymovelink, atau terdiri dari beberapa kombinasi).

function dragStart(ev) 
{ev.dataTransfer.setData("text", ev.target.id);}

Tahap dua, Drop objek
  • keempat, pada event ondragover menentukan dimana data yang di drag akan di drop. Secara otomatis, data atau elemen tidak dapat di drop dalam elemen lainnya. Untuk memungkinkan terjadi proses drop, makan perlu dilakukan pencegahan default handling dari elemen. Hal ini dapat diselesaikan dengan pemanggilan method event.preventDefault().
  • terakhir, event drop, memungkinkan proses drop dapat dilakukan secara nyata.

function dragDrop(ev) 
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));}

Contoh 1

<!DOCTYPE HTML>

<html>

 

<head>

<title>

Drag and Drop box

</title>

  

<script>

function allowDrop(ev) {

ev.preventDefault();}

   

function dragStart(ev) {

ev.dataTransfer.setData("text", ev.target.id);}

   

function dragDrop(ev) {

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));}

</script>

  

<style>

#box {

margin: auto;

width: 50%;

height:200px;

border: 3px solid green;

padding: 10px;

}

 

#box1, #box2, #box3 {

float: left;

margin: 5px;

padding: 10px;

}

 

#box1 {

width: 50px;

height: 50px;

background-color: #F5B5C5;

}

 

#box2 {

width: 100px;

height: 100px;

background-color: #B5D5F5;

}

 

#box3 {

width: 150px;

height: 150px;

background-color: #BEA7CC;

}

 

p {

font-size:20px;

font-weight:bold;

text-align:center;

}

 

.gfg {

font-size:40px;

color:#009900;

font-weight:bold;

text-align:center;

}

</style>

</head>

 

<body>

<div class = "gfg">

Menu tarik tarik

</div>

 

<p>

Drag and drop of boxes

</p>

 

<div id = "box">

<div id="box1" draggable="true"ondragstart="dragStart(event)"></div>

<div id="box2" draggable="true"ondragstart="dragStart(event)"></div>

<div id="box3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>

</div>

 

</body>

</html>


Penjelasan:
  • satu, Proses drag dimulai dengan mengatur properti draggable dari elemen yang akan di drag menjadi bernilai true.
  • dua, Dapatkan data drag dengan method dataTransfer.getData()Method ini akan mengembalikan data apapun yang telah diatur dengan tipe sama pada method setData().
  • tiga, Pemanggilan method event.preventDefault() untuk mengijinkan drop data dari elemen ke dalam elemen lain melalui pencegahan default handling dari elemen.
  • empat, Elemen kemudian disimpan dalam variabel data yang mana dapat ditambahkan ke dalam elemen drop.

Contoh 2: Contoh ilustrasi dari gambar drag dan drop.

<!DOCTYPE HTML>

<html>

 

<head>

<script>

function allowDrop(ev

{ev.preventDefault();}

   

function dragStart(ev

{ev.dataTransfer.setData("text", ev.target.id);}

   

function dragDrop(ev

{ev.preventDefault();

var data = ev.dataTransfer.getData("text");

ev.target.appendChild(document.getElementById(data));}

</script>

 

<style>

.div1 {

width: 240px;

height: 75px;

padding: 10px;

border: 1px solid black;

background-color: #F5F5F5;}

 

p {

font-size:20px;

font-weight:bold;}

 

.gfg {

font-size:40px;

color:#009900;

font-weight:bold;}

</style>

</head>

 

<body>

<div class = "gfg">

Menu Tarik Tarik

</div>

 

<p>

Drag and Drop gambar di dalam kotak

</p>

 

<div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)">

<img id="drag1" src="https://upload.wikimedia.org/wikipedia/id/9/94/NarutoCoverTankobon1.jpg" draggable="true" ondragstart="dragStart(event)" width="220" height="70">

</div>

 

<br>

 

<div class="div1" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>

</body>

</html>

Komentar

  1. Apa yang dimaksud dengan drag n drop pada html?

    BalasHapus
    Balasan
    1. Drag and drop HTML adalah fitur yang menggunakan event DOM yang berasal dari event mouse. Operasi drag dimulai ketika user memilih elemen yang dapat didrag, dan menyeretnya ke elemen yang dapat di drop, dan kemudian melepaskan element yang dapat di drag tersebut.

      Hapus
    2. Drag and Drop adalah konsep yang sangat interaktif dan user friendly yang membuat pengoperasian web menjadi lebih mudah untuk proses memindahkan object ke lokasi berbeda dari lokasi semula. Fitur ini juga memungkinkan untuk menahan tombol mouse terhadap posisi suatu elemen, atapun menyeret elemen yang dituju ke lokasi lain, dan melepaskan tombol mouse untuk melepaskan elemen yan diseret atau di drag tersebut pada posisi yang sesuai.

      Hapus
  2. Bagaimana cara mengimplementasikan fitur drag n drop pada html5?

    BalasHapus
    Balasan
    1. Untuk menerapkan fitur drag n drop pada HTML, maka perlu dilakukan dua proses berikut:

      1. Untuk mengimplementasikan drag n drop HTML5, maka ciptakan object yang akan dilakukan penyeretan atau object drag.

      2. Atur atribut ke tipe dragabble ke nilai TRUE dan atur event listener untuk dragstart yang menyimpan data yang sedang diseret.

      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

6 Tahap Utama dalam Melakukan Kompilasi Program Hello World Java

4 Contoh Program Java dan Multiple Inheritance

3 Jenis Utama Looping pada Java