Baca Juga :  Mengatur Warna Background Website

Membuat jQuery Drag and Drop

3 220

Dalam tutorial sebelumnya kita sudah membuat perbandingan data menggunakan highchart, pada artikel ini kita akan melihat contoh kode untuk jQuery drag and drop. Dalam contoh ini, kita membutuhkan jquery UI library untuk menggunakan fungsi drag and drop.

Kami menggunakan fungsi draggable () untuk memindahkan elemen draggable. Fungsi ini dipanggil dengan referensi dari string pemilih yang menunjukkan elemen HTML menjadi drag and drop.

Drag Elemen UI

Ini adalah elemen gambar yang akan diseret dengan menggunakan jQuery. Kami merujuk gambar ini dengan sebuah id. Pemilih id ini digunakan di jQuery untuk memanggil fungsi draggable ().

<img src="smile.jpg" id="drag_smile">

jQuery draggable () Fungsi

Kami memanggil fungsi draggable () sehubungan dengan id dari elemen gambar. Dengan menggunakan script single line ini kita bisa drag dan drop elemen di manapun di jendela.

$( "#drag_smile" ).draggable();

Jika kita ingin membatasi area drag, maka kita harus menggunakan kode ini.

$(function() {
 $( "#drag_smile" ).draggable({
   containment: "parent"
 });
});

Ada lebih banyak pilihan, metode, dan peristiwa untuk mengendalikan jQuery drag and drop. Pilihan drag and drop dapat diatur sebagai argumen draggable ().

Misalnya, kita menyetel properti kursor ke acara seret. Kedua metode ini bisa digunakan saat menyetel properti drag.

Baca Juga :  Apa Keterbatasan WordPress.com itu?

 

Menetapkan properti untuk menginisialisasi draggable.

$( "#drag_smile" ).draggable({ cursor: "hand" });

Menetapkan properti setelah inisialisasi.

$( "#drag_smile" ).draggable();
$( "#drag_smile" ).draggable("option", "cursor", "hand" );

Lebih banyak pilihan

  • axis – Untuk mengatur arah menyeret (vertikal atau horizontal).
  • delay – Waktu tunda yang diambil (dalam milidetik) untuk mulai menyeret dari menekan mouse.
  • helper – Untuk memungkinkan untuk membuat salinan elemen drag jika diperlukan.
  • revert – Untuk mengembalikan elemen seret ke posisi semula (Nilai yang mungkin benar, benar).
  • revert Duration – Waktu untuk mengembalikan posisi elemen.
  • scroll – Untuk memasukkan area tarik yang dapat digulir.

Dan masih banyak pilihan widget ini, yang membuat drag and drop cukup menarik.

Fungsi

  • enable() – Untuk mengaktifkan drag.
  • disable() – Untuk menonaktifkan drag.
  • destoyed() – Untuk menghapus drag.
  • options() – Untuk mengatur properti drag.

Event

  • Create – on create.
  • Start – on mulai menyeret elemen setelah mouse ke bawah.
  • Drag – selama tarik.
  • Drop – on melepaskan mouse dari dragging.
Demo

Get real time updates directly on you device, subscribe now.

3 Comments
  1. […] berharap artikel ini sangat membantu kamu yang sedang belajar. Untuk belajar Membuat jQuery Drag and Drop silahkan baca artikel […]

  2. […] Kode ini untuk penanganan add-to-cart dengan jQuery drag and drop. Pada tutorial sebelumnya, kita telah melihat bagaimana cara memindahkan gambar menggunakan drag dan drop jQuery. […]

  3. […] seperti biasa seperti yang telah kita lakukan dengan pengendali event jQuery lainnya, seperti, Drag / Drop, Show / Hide dan lain-lain, untuk mengakses metode dan opsi jQuery yang […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.