Cara memindahkan Div dengan drag and drop di mobile web atau website dengan HTML 5 dan Javascript

Hery Purnama - Trainer Articles :

How to move Divs by drag and drop on a mobile web or website with HTML 5 and Javascript

Cara memindahkan Div dengan drag and drop di mobile web atau website dengan HTML 5 dan Javascript 

WEBSITE SAMPLE

Untuk memungkinkan pengguna untuk memindahkan tag div di HTML dengan drag-and-drop, Anda dapat menggunakan API Drag and Drop bawaan HTML5 yang tersedia di JavaScript.

Berikut ini adalah contoh kode JavaScript yang dapat Anda gunakan untuk mengimplementasikan fitur ini:

<div id="drag" draggable="true" ondragstart="drag(event)">Drag me!</div>

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

<script>

function allowDrop(event) {

  event.preventDefault();

}

function drag(event) {

  event.dataTransfer.setData("text", event.target.id);

}

function drop(event) {

  event.preventDefault();

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

  event.target.appendChild(document.getElementById(data));

}

</script>

Penjelasan kode di atas:

1. Kita memiliki dua div dengan id yang berbeda: drag dan drop.
2. drag diberi atribut draggable="true" sehingga kita dapat menariknya, dan kita menambahkan event listener ondragstart untuk menangani saat kita memulai drag.
3. Saat drag dimulai, kita menggunakan metode setData pada event.dataTransfer untuk menentukan data yang akan di-drop. Kita mengatur datanya menjadi ID dari elemen yang sedang di-drag (event.target.id).
4. drop div diberi event listener ondragover dan ondrop. ondragover memanggil preventDefault untuk mengizinkan drop. ondrop menangani saat kita melepaskan elemen yang sedang kita tarik.
5. Kita mencegah perilaku default pada event drop dengan memanggil event.preventDefault().
6. Kita mengambil data yang ditentukan oleh setData menggunakan event.dataTransfer.getData("text").
7. Kita menambahkan elemen yang sedang kita tarik ke drop div menggunakan appendChild.

Anda dapat menyesuaikan kode ini untuk memenuhi kebutuhan Anda, seperti mengganti id elemen dan menambahkan gaya CSS untuk menampilkan elemen dengan cara yang sesuai.

MOBILE WEB

API Drag and Drop yang dijelaskan sebelumnya dapat digunakan di perangkat seluler seperti ponsel atau tablet. Namun, interaksi drag-and-drop dapat sedikit berbeda pada perangkat seluler karena adanya sentuhan layar. Untuk mengimplementasikan drag-and-drop di perangkat seluler, Anda dapat menggunakan event sentuhan yang diberikan oleh browser.

Berikut adalah contoh kode JavaScript yang dapat Anda gunakan untuk mengimplementasikan drag-and-drop di perangkat seluler:

<div id="drag" ontouchstart="dragStart(event)" ontouchmove="dragging(event)" ontouchend="dragEnd(event)">Drag me!</div> <div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <script> let dragItem = null; function allowDrop(event) { event.preventDefault(); } function dragStart(event) { dragItem = event.target; event.dataTransfer.setData("text/plain", event.target.id); setTimeout(() => { event.target.style.display = "none"; }, 0); } function dragging(event) { const touch = event.touches[0]; dragItem.style.left = touch.clientX + 'px'; dragItem.style.top = touch.clientY + 'px'; } function dragEnd(event) { event.target.style.display = "block"; dragItem = null; } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text/plain"); event.target.appendChild(document.getElementById(data)); } </script>

Penjelasan kode di atas:

• Seperti sebelumnya, kita memiliki dua div dengan id yang berbeda: drag dan drop.
• Kita menambahkan event listener ontouchstart, ontouchmove, dan ontouchend pada drag untuk menangani saat kita memulai drag, menggeser elemen, dan melepaskannya.
• Saat ontouchstart terjadi, kita menyimpan referensi ke elemen yang sedang di-drag dalam variabel dragItem, dan menggunakan event.dataTransfer.setData untuk menentukan data yang akan di-drop. Kita mengatur datanya menjadi ID dari elemen yang sedang di-drag (event.target.id).
• Saat ontouchmove terjadi, kita mengambil posisi sentuhan dari event.touches dan menggeser elemen yang sedang di-drag ke posisi tersebut.
• Saat ontouchend terjadi, kita menampilkan kembali elemen yang sedang di-drag yang sebelumnya disembunyikan dengan display: none, dan menghapus referensi ke elemen dari dragItem.
• Kita mencegah perilaku default pada event drop dengan memanggil event.preventDefault().
• Kita mengambil data yang ditentukan oleh setData menggunakan event.dataTransfer.getData("text/plain").
• Kita menambahkan elemen yang sedang kita tarik ke drop div menggunakan appendChild.
• Anda dapat menyesuaikan kode ini untuk memenuhi kebutuhan Anda, seperti mengganti id elemen dan menambahkan gaya CSS untuk menampilkan elemen dengan cara yang sesuai pada perangkat seluler.