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:

1. Agar suatu elemen sanggup 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 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); }

3. 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: