Cara Membuat Elemen HTML Draggable Dengan CSS dan Javascript

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara membuat elemen HTML yang dapat diseret dengan JavaScript dan CSS.

Elemen DIV yang Draggable

<!DOCTYPE html>
<html>
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
</style>
<body>

<h1>Contoh Draggable DIV Element</h1>

<p>Klik dan tahan tombol mouse saat memindahkan elemen DIV</p>

<!-- Draggable DIV -->
<div id="mydiv">
  <!-- Sertakan DIV tajuk dengan nama yang sama dengan DIV yang dapat diseret, diikuti dengan "tajuk" -->
  <div id="mydivheader">Pindahkan di sini</div>
  <p>Pindahkan</p>
  <p>DIV</p>
  <p>Di</p>
   <p>Sini</p>
</div>

<script>
// Buat elemen DIV dapat diseret:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // jika ada, header adalah tempat Anda memindahkan DIV:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // jika tidak, pindahkan DIV dari mana saja di dalam DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // dapatkan posisi kursor mouse saat startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // memanggil suatu fungsi setiap kali kursor bergerak:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // hitung posisi kursor baru:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // atur posisi baru elemen tersebut:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // berhenti bergerak saat tombol mouse dilepaskan:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

Buat Elemen DIV yang Draggable

Langkah 1) Tambahkan HTML:
Contoh

<!-- Draggable DIV -->
<div id="mydiv">
  <!-- Sertakan DIV tajuk dengan nama yang sama dengan DIV yang dapat diseret, diikuti dengan "tajuk" -->
  <div id="mydivheader">Pindahkan di sini</div>
  <p>Pindahkan</p>
  <p>DIV</p>
  <p>Di</p>
   <p>Sini</p>
</div>

Langkah 2) Tambahkan CSS:
Tambahkan properti position: absolute :
Contoh

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

Langkah 3) Tambahkan JavaScript:
Contoh

// Buat elemen DIV dapat diseret:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // jika ada, header adalah tempat Anda memindahkan DIV:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // jika tidak, pindahkan DIV dari mana saja di dalam DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // dapatkan posisi kursor mouse saat startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // memanggil suatu fungsi setiap kali kursor bergerak:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // hitung posisi kursor baru:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // atur posisi baru elemen tersebut:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // berhenti bergerak saat tombol mouse dilepaskan:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}