Drag And Drop di HTML5

Drag and Drop API adalah bagian dari HTML5. Drag and Drop API memungkinkan kita menetapkan elemen-elemen tertentu untuk dapat didrag, kemudian menetapkan apa yang perlu terjadi ketika 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 bisa di Drag and Drop. Pastikan browser yang anda gunakan adalah IE9, Firefox, Opera12, Chrome, dan Safari5.

Ada beberapa langkah untuk menambahkan Drag and Drop:

1. Agar suatu elemen bisa didrag, pastikan atribut ONDRAGGABLE diset ke nilai true:

   <IMG SRC="myImage.jpg" ONDRAGGABLE="true" ID="drag1">

2. Lalu tambahkan event listener untuk ONDRAGSTART pada elemen yang ingin anda tetapkan untuk dapat didrag:

   <IMG SRC="myImage.jpg" ONDRAGGABLE="true" ONDRAGSTART="oDragStart(event)" ID="drag1">

   Di mana fungsi oDragStart() yang dipanggil ketika awal drag (atribut ONDRAGSTART) suatu elemen seperti berikut:

   function oDragStart(oEvent) { oEvent.dataTransfer.setData("Text", oEvent.target.id); }

3. Tambahkan event listener untuk ONDRAGOVER dan ONDROP pada setiap elemen yang ingin anda tetapkan sebagai penerima dari elemen yang didrag. ONDRAGOVER menentukan di mana data/elemen yang didrag dapat didrop.

   Secara default, data/elemen tidak dapat dijatuhkan ke dalam elemen lainnya. Untuk memungkinkanya, kita harus mencegah penanganan default dari elemen, dan hal ini bisa dilakukan dengan memanggil EVENT.preventDefault() untuk ONDRAGOVER:

   function oAllowDrop(oEvent) { oEvent.preventDefault(); }

   Sebagai contoh saja bahwa elemen yang menjadi tempat di mana elemen yang sedang didrag akan didrop adalah 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, ketika data/elemen yang didrag didrop, maka event DROP terjadi. Dalam contoh ini, atribut ONDROP memanggil fungsi bernama 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() seperti berikut:

   function oDrop(oEvent) { oEvent.preventDefault(); var oData = oEvent.dataTransfer.getData("Text"); oEvent.target.appendChild(document.getElementById(oData)); }

Contoh kode akhir:

<SCRIPT> function oDragStart(oEvent) { oEvent.dataTransfer.setData("Text",oEvent.target.id); } function oAllowDrop(oEvent) { oEvent.preventDefault(); } function oDrop(oEvent) { oEvent.preventDefault(); var oData = oEvent.dataTransfer.getData("Text"); oEvent.target.appendChild(document.getElementById(oData)); } </SCRIPT> <IMG SRC="myImage.jpg" ONDRAGGABLE="true" ONDRAGSTART="oDragStart(event)" ID="drag1"> <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>