Istilah draggable merupakan sebuah kegiatan dimana kita memilih suatu objek dengan cara mengklik dan menahan objek dengan mouse kemudian memindahkan objek tersebut, biasanya kegiatan ini kita lakukan ketika memindahkan suatu file dari tempat satu ketempat yang lain nya, ataupun biasa kita lakukan ketikan menyeleksi objek berupa tulisan lalu copy dan paste. Dengan adanya teknologi jQuery kita bisa memanipulasi objek agar bisa di drag atau dalam istilah nya draggable objek, berikut ini akan saya contohkan dan saya jelaskan bagaimana Cara Membuat Draggable Objek dengan jQuery. kalian bisa simak langkah-langkahnya berikut ini.
Untuk membuat fungsi draggable kita akan menggunakan sintak dari jQuery, sebelum lebih lanjut pada sintak jQuery kita akan terlebih dahulu membuat sebuah objek berupa gambar dengan sintak HTML berikut.
|
1 2 3 |
<body> <img class="obj" src="https://goo.gl/cZH3Ai"> </body> |
Kalian bisa ketikan struktur HTML diatas dan isikan satu buah objek berupa gambar pada sintak img src, kemudian setelah sintak HTML diatas kalian ketikan selanjutnya kita akan set objek gambar dengan sintak CSS3 berikut.
|
1 2 3 4 5 6 7 8 |
.obj { width: 200px; height: 200px; line-height: 100px; position: absolute; left: 20px; top: 20px; } |
Tujuan sintak CSS3 diatas adalah kita set besar dari objek tersebut, selanjutnya adalah kita akan berikan fungsi drag agar objek gambar bisa kita drag dan bisa kita pindahkan sesuai keinginan, berikut sintak jQuery nya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
(function($) { $.fn.drags = function(opt) { opt = $.extend({handle:"",cursor:"move"}, opt); if(opt.handle === "") { var $el = this; } else { var $el = this.find(opt.handle); } return $el.css('cursor', opt.cursor).on("mousedown", function(e) { if(opt.handle === "") { var $drag = $(this).addClass('draggable'); } else { var $drag = $(this).addClass('active-handle').parent().addClass('draggable'); } var z_idx = $drag.css('z-index'), drg_h = $drag.outerHeight(), drg_w = $drag.outerWidth(), pos_y = $drag.offset().top + drg_h - e.pageY, pos_x = $drag.offset().left + drg_w - e.pageX; $drag.css('z-index', 1000).parents().on("mousemove", function(e) { $('.draggable').offset({ top:e.pageY + pos_y - drg_h, left:e.pageX + pos_x - drg_w }).on("mouseup", function() { $(this).removeClass('draggable').css('z-index', z_idx); }); }); e.preventDefault(); // disable selection }).on("mouseup", function() { if(opt.handle === "") { $(this).removeClass('draggable'); } else { $(this).removeClass('active-handle').parent().removeClass('draggable'); } }); } })(jQuery); $('.obj').drags(); |
Setelah semua sintak diatas kalian ketikan, langkah terakhir adalah kalian wajib ketikan library jQuery berikut didalam tag body.
|
1 |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
Kemudian simpan file dengan format .html kemudian jalankan dibrowser masing-masing dan lihat hasil nya.
Baik itulah tadi tutorial bagaimana Cara Membuat Draggable Objek dengan jQuery. Semoga bermanfaat.
Selamat mencoba 🙂