Membuat Droppable dengan jQuery

Membuat Droppable dengan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh penggunaan jQuery untuk membuat elemen menjadi droppable (dapat menerima elemen yang dijatuhkan di atasnya) dalam sebuah form HTML dengan jQuery

See the Pen Membuat Droppable dengan jQuery by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Membuat Droppable dengan jQuery</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <style>
    #droppable {
      width: 200px;
      height: 200px;
      border: 2px dashed #ccc;
      padding: 10px;
      text-align: center;
      margin: 20px auto;
    }
    .draggable {
      width: 100px;
      height: 100px;
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      margin: 10px;
      cursor: move;
    }
  </style>
</head>
<body>
  <h1>Membuat Droppable dengan jQuery</h1>
  
  <div id="droppable">
    Seret dan lepaskan elemen di sini
  </div>
  
  <div class="draggable">
    Elemen 1
  </div>
  
  <div class="draggable">
    Elemen 2
  </div>
  
  <div class="draggable">
    Elemen 3
  </div>
  
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(document).ready(function() {
      $(".draggable").draggable();
      $("#droppable").droppable({
        drop: function(event, ui) {
          $(this).addClass("ui-state-highlight").html("Elemen berhasil dijatuhkan!");
        }
      });
    });
  </script>
</body>
</html>
HTML

Dalam contoh di atas, kita menggunakan jQuery untuk membuat elemen droppable pada form HTML. Elemen droppable adalah area di mana kita dapat menjatuhkan elemen lain yang dapat di-drag.

Pertama, kita menambahkan CSS untuk mengatur tampilan elemen droppable dan draggable. Kemudian, kita menambahkan elemen droppable dengan menggunakan tag <div> dengan id “droppable”. Di dalam elemen droppable, kita menambahkan teks “Seret dan lepaskan elemen di sini”.

Selanjutnya, kita menambahkan beberapa elemen draggable dengan menggunakan tag <div> dan class “draggable”. Setiap elemen draggable memiliki teks yang berbeda.

Kemudian, kita memasukkan script jQuery di bagian bawah halaman. Di dalam script tersebut, kita menggunakan fungsi draggable() untuk membuat elemen-elemen dengan class “draggable” dapat di-drag. Selain itu, kita juga menggunakan fungsi droppable() untuk membuat elemen dengan id “droppable” menjadi droppable.

Ketika elemen draggable dijatuhkan ke dalam elemen droppable, fungsi drop akan dijalankan. Di dalam fungsi tersebut, kita menambahkan class “ui-state-highlight” ke elemen droppable dan mengubah teksnya menjadi “Elemen berhasil dijatuhkan!”.

Dengan menggunakan kode di atas, kita dapat membuat elemen droppable dengan mudah menggunakan jQuery dalam sebuah form HTML.

Artikel Terbaru ⭐