Drag And Drop Di Html5
Drag and Drop API ialah bab dari HTML5. Drag and Drop API memungkinkan kita memutuskan elemen-elemen tertentu untuk sanggup didrag, lalu memutuskan apa yang perlu terjadi saat elemen itu diseret di atas atau didrop pada elemen-elemen lain yang ada di halaman.
Coba anda drag gambar yang ada di kotak pertama ke kotak disebelahnya secara urut, atau juga secara acak:
Di HTML5 semua elemen sanggup di Drag and Drop. Pastikan browser yang anda gunakan ialah IE9, Firefox, Opera12, Chrome, dan Safari5.
Ada beberapa langkah untuk menambahkan Drag and Drop:
-
Agar suatu elemen sanggup didrag, pastikan atribut ONDRAGGABLE diset ke nilai
true
:<IMG SRC="myImage.jpg" ONDRAGGABLE="true" ID="drag1"> -
Lalu tambahkan event listener untuk ONDRAGSTART pada elemen yang ingin anda memutuskan untuk sanggup didrag:
<IMG SRC="myImage.jpg" ONDRAGGABLE="true" ONDRAGSTART="oDragStart(event)" ID="drag1">Di mana fungsi
oDragStart()
yang dipanggil saat awal drag (atribut ONDRAGSTART) suatu elemen menyerupai berikut:function oDragStart(oEvent) { oEvent.dataTransfer.setData("Text", oEvent.target.id); } -
Tambahkan event listener untuk ONDRAGOVER dan ONDROP pada setiap elemen yang ingin anda memutuskan sebagai akseptor dari elemen yang didrag. ONDRAGOVER memilih di mana data/elemen yang didrag sanggup didrop.
Secara default, data/elemen tidak sanggup dijatuhkan ke dalam elemen lainnya. Untuk memungkinkanya, kita harus mencegah penanganan default dari elemen, dan hal ini sanggup dilakukan dengan memanggil EVENT.preventDefault() untuk ONDRAGOVER:
function oAllowDrop(oEvent) { oEvent.preventDefault(); }Sebagai teladan saja bahwa elemen yang menjadi daerah di mana elemen yang sedang didrag akan didrop ialah elemen DIV:
<DIV ID="div1" ONDRAGOVER="oAllowDrop(event)" STYLE="float:left;width:100px;height:35px;margin:0;padding:5px;border:1px solid #555;"> </DIV>Terakhir, saat data/elemen yang didrag didrop, maka event DROP terjadi. Dalam teladan ini, atribut ONDROP memanggil fungsi berjulukan
oDrop()
, misalnya:<DIV ID="div1" ONDROP="oDrop(event)" ONDRAGOVER="oAllowDrop(event)" STYLE=’float:left; width:100px; height:35px; margin:0;padding:5px;border:1px solid #555;’> </DIV>Dimana fungsi
oDrop()
menyerupai berikut:function oDrop(oEvent) { oEvent.preventDefault(); var oData = oEvent.dataTransfer.getData("Text"); oEvent.target.appendChild(document.getElementById(oData)); }
Contoh instruksi akhir: