Labkom99.com – Belajar HTML5, Anda dapat menggunakan drag and drop element HTML5 di halaman. Dengan menggunakan pemantauan kejadian JavaScript, Anda dapat menentukan apa yang terjadi pada element setelah element diseret atau didrag. Element HTML5 yang digunakan untuk seret dan lepas dapat memiliki dua peran yaitu berikut:
- Draggable (element draggable)
- Drop target / area drop (target jatuhkan atau didrop/ area drop)
Element yang dapat drag atau ditarik adalah element yang dapat ditarik pengguna pada halaman dan menempatkannya di tempat lain. Ini bisa menjadi satu atau lebih element.
Target drop atau drop area adalah area tempat element yang dapat diseret dijatuhkan.
Drag and Drop Event
Untuk mengontrol drag and drop element HTML, Anda perlu melakukan 3 langkah:
- Pilih element HTML untuk drag
- Tambahkan event listener untuk element HTML yang drag
- Tambahkan event untuk area tempat element HTML ditempatkan
Gambar berikut mencantumkan peristiwa dan properti seret dan lepas:
Pertama, Anda perlu mengatur element yang draggable=”true” akan diseret agar dapat diseret.
Kemudian Anda perlu menyiapkan drag start dan drag end event untuk element drag. Dalam peristiwa ini, Anda dapat mengatur apa yang terjadi ketika element mulai diseret dan mengakhiri penarikan.
Kemudian Anda perlu menambahkan event pada unsur-unsur daerah penempatan, Anda dapat menggunakan fungsi event ini sebagai berikut: drag enter, drag over, drag leave dan drop.
Drag enter Peristiwa dipicu saat Anda menyeret element ke atas area. Peristiwa ini hanya dipicu saat element diseret memasuki area lepas dari luar area lepas, yang biasanya ditentukan oleh posisi mouse.
Saat element tarik melewati area pelepasan, drag over event akan dipicu. Dan akan terus memicu ketika element drag bergerak di area drop.
Jika Anda memindahkan element yang diseret ke luar area tempat peletakan, drag leave event akan bergerak.
Jika Anda menempatkan element seret di dalam area peletakan, drop event akan bergerak.
Kode Element Drag and Drop
Mari kita lihat cara menangani peristiwa drag and drop. Kami pertama kali membuat element gambar yang bisa diseret. Ini kode HTML-nya:
<img id="draggagle1" src="img/html5.png" draggable="true">
Maka kami membutuhkan area untuk penempatan. Satu digunakan di sini <div>.
<div id="droptarget1">drop target/div> Setelah menyelesaikan langkah-langkah di atas, kita perlu menambahkan event listener untuk mereka. Kode untuk pemantauan event adalah sebagai berikut:
<script>
var draggable = document.getElementById("draggable1");
draggable.addEventListener('dragstart', dragStart, false);
draggable.addEventListener('dragend' , dragEnd , false);
var droptarget = document.getElementById("droptarget1");
droptarget.addEventListener('dragenter', dragEnter , false);
droptarget.addEventListener('dragover' , dragOver , false);
droptarget.addEventListener('dragleave', dragLeave , false);
droptarget.addEventListener('drop' , drop , false);
/* Draggable event handlers */
function dragStart(event) {
event.dataTransfer.setData('text/html', "You dragged the image!");
}
function dragEnd(event) {
}
/* Drop target event handlers */
function dragEnter(event) {
}
function dragOver(event) {
event.preventDefault();
return false;
}
function dragLeave(event) {
}
function drop(event) {
var data = event.dataTransfer.getData('text/html');
event.preventDefault();
return false;
}
</script> Untuk mencapai pertukaran data selama operasi drag-and-drop, IE5 memperkenalkan dataTransfer objek, yang merupakan atribut objek event, digunakan untuk mentransfer data dalam format string dari element yang diseret ke target pelepasan. Karena ini adalah properti objek event, objek dataTransfer hanya dapat diakses di event handler dari kejadian drag and drop. Dalam event handler, Anda bisa menggunakan properti dan metode objek ini untuk meningkatkan fungsi drag-and-drop. Saat ini, draf spesifikasi HTML5 juga menyertakan objek data Transfer.
Data Transfer Objek memiliki dua metode utama: getData() dan setData(). getData() Anda bisa mendapatkan nilai yang setData() disimpan. setData() Parameter pertama dari getDAta() metode tersebut, yang juga merupakan satu – satunya metode parameter, adalah string yang mewakili jenis data yang akan disimpan. Nilainya adalah “text” atau “URL”, misalnya:
//event text
event.dataTransfer.setDAta("text", "some text");
var text = event.dataTransfer.getData("text");
//event URL
event.dataTransfer.setData("URL", "HTML://www.labkom99.com/"); Internet Explorer hanya menetapkan dua jenis data yang valid: “text” dan “URL”, sedangkan HTML5 memperluasnya untuk memungkinkan berbagai jenis MIME ditentukan. Mempertimbangkan kompatibilitas ke belakang, HTML5 juga mendukung “text” dan “URL”, tetapi kedua jenis ini akan dipetakan ke “text / biasa” dan “text / url-list”.
Data Transfer objek dapat menyimpan nilai untuk setiap tipe MIME. Dengan kata lain, tidak ada masalah dengan menyimpan sepotong teks dan URL di objek ini secara bersamaan. Namun, dataTransfer data yang disimpan di objek hanya bisa dibaca di pengendali peristiwa drop. Jika on drop data tidak terbaca di handler, maka dataTransfer objek telah dimusnahkan dan data tersebut hilang.
Saat menyeret teks di kotak teks, browser akan memanggil setData() metode untuk menyimpan teks yang diseret di dataTransferobjek dalam format “text”. Demikian pula, saat Anda menyeret dan melepas tautan atau gambar, setData() metode ini dipanggil dan URL disimpan.
Kemudian, ketika element-element ini diseret dan dijatuhkan ke target pelepasan, getData() data dapat dibaca. Tentu saja, sebagai pengembang, Anda juga dapat drag start memanggilnya di event handler untuk setData() secara manual menyimpan data yang ingin Anda kirimkan untuk penggunaan di masa mendatang.
Ada perbedaan antara menyimpan data sebagai teks dan menyimpan sebagai URL. Jika Anda menyimpan data dalam format teks, data tersebut tidak akan menerima pemrosesan khusus. Jika Anda menyimpan data sebagai URL, browser akan memperlakukannya sebagai link di halaman web. Dengan kata lain, jika Anda meletakkannya di jendela browser lain, browser akan membuka URL tersebut.
Firefox tidak dapat memetakan “URL” dan “text” ke “text/ url-list” dan “text / biasa” dengan benar sebelum versi kelima. Tapi itu bisa memetakan “Text” ke “text / biasa”. Untuk dataTransfer memperoleh data yang lebih baik dari objek dalam kasus lintas-browser, yang terbaik adalah memeriksa dua nilai saat memperoleh data URL, dan menggunakan “text” saat memperoleh data teks.
var dataTransfer = event.dataTransfer;
//event URL
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
//event text
var text = dataTransfer.getData("Text"); Perhatikan bahwa Anda harus menempatkan tipe data pendek terlebih dahulu, karena IE10 dan versi sebelumnya masih tidak mendukung nama tipe MIME yang diperpanjang, dan mereka akan memunculkan kesalahan saat mereka menemukan tipe data yang tidak dikenal.
Objek DataTransfer, effects Allowed, drop Effect dan setDragImage ()
Kami telah memperkenalkan beberapa DataTransfer pengetahuan tentang objek di atas. DataTransferDapat memberi pengguna beberapa efek visual dalam proses menyeret dan melepas element. DataTransferObjek memiliki dua properti dan satu metode dapat digunakan. seperti dibawah ini
