Draggable Tanpa jQuery UI

Tabel Konten
  1. Pembaharuan 26 Februari 2013 
  2. Penggunaan 
    1. jQuery 
    2. HTML 
Draggable Without jQuery UI
$(function() {
    $('body').on('mousedown', 'div', function() {
        $(this).addClass('draggable').parents().on('mousemove', function(e) {
            $('.draggable').offset({
                top: e.pageY - $('.draggable').outerHeight() / 2,
                left: e.pageX - $('.draggable').outerWidth() / 2
            }).on('mouseup', function() {
                $(this).removeClass('draggable');
            });
        });
        e.preventDefault();
    }).on('mouseup', function() {
        $('.draggable').removeClass('draggable');
    });
});

Lihat Demo Kejutan =)

Pembaharuan 26 Februari 2013 

Kode di atas kurang cerdas karena jQuery hanya memposisikan kursor di tengah elemen bergerak. Di sini Saya sudah membuat plugin sederhana yang lebih cerdas dan dapat menyesuaikan posisi pointer terhadap elemen, tidak harus selalu di tengah elemen:

Lihat Demo Telah Dihosting

Penggunaan 

jQuery 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//cdn.rawgit.com/tovic/dte-project/3c9ce0ac972ba889fc06e0374c866dd034198684/jquery-draggable/draggable.min.js"></script>
<script>
$(function() {
    $('.box').drags();
});
</script>

HTML 

<div class="box">Saya bisa digeser...</div>

15 Komentar

  • MUX SPARROW

    Whoaaa!! makin dahsyat aja ni Mas Taufik! :-bd \o/

    • Anonim

      Iya mantep banget, asik nih kalau dijadiin game catur buat blog :D

  • Unknown

    Bang kalau tidak salah ini juga bisa untuk buat untuk buat logo DTE yang diheader itu bukan..?? kapan-kapan kita main catur aja dh bang jangan mikirin kode dulu biar saya bisa menghabiskan banyak kopi dan rokok sambil main catur...
    saya baru tau kalau ada daftar member aktif ternyata mampang juga saya no punggung 57 kayaknya jauh banget dari alam, zhin, dan bayu. bisa tidak naik kelas ini heheheeeee

  • Taufik Nurrohman

    @Suwardi Unggit Sayangnya logo DTE di atas bentuknya link, jadi seandainya dibuat draggable, saat mulai nge-drag yang jadi malah ngeklik link :D
    Saya nggak pinter main catur.

  • Andy Nur

    Mantep Kang \o/ , saya mau lanjut nge Save page2 di blog ini.
    :D

  • Anonim

    udah lama nyerah, pas di coba lagi baru ngeuh.
    skrng udah bisa di geser2 post hoempagenya :-bd

  • Anonim

    keren keren, cuma agak dikit lag waktu digeser dgn cepat.
    coding dari plugin jquery dalam hal ini menang dalam hal smoothnya, ^^.
    tapi tetep mantap gan, terus bercoding ria dan jgn lupa share, hehe.

  • Unknown

    Hi,

    Great plugin, thanks! Is it possible to make it not follow links when you drag a box by a link inside it?

    • Taufik Nurrohman

      Yes:

      $(function() {
      $('.box').drags().find('a').click(function() {
      return false; // Disable links inside the `.box`
      });
      });
  • Carlos

    Brilliant Cheers

  • Unknown

    Mas mau tanya saya kan makai jquery ui,sama modal dialog.
    Nagh saya ingin agar modal dialog ini bisa di drag,sudah bisa di drag namun saat di drag,dialognya malah melesat jauh dari mouse .. nagh cara ngebenerinya gimana ???
    Nagh Ini Contohnya ... >>> https://googledrive.com/host/0BxlJMO68thzAcjBYT0wyaXgxSGc/index.html.....,,,, mohon di bantu :)

    • Taufik Nurrohman

      Pakai plugin Saya yang di atas saja mas, jangan pakai JQuery UI:

      <script src="draggable.min.js"></script>
      <script>
      $(function() {
      $('.md-content').drags({
      handle: "h3:first"
      });
      });
      </script>

      Tambahkan juga kode CSS ini untuk menetralkan CSS transisi supaya langkahnya tidak berat:

      .md-content.draggable {
      -webkit-transition-duration:0s;
      -moz-transition-duration:0s;
      -ms-transition-duration:0s;
      -o-transition-duration:0s;
      transition-duration:0s;
      }
      • Unknown

        Wah makasih mas .. :D saya akan langsung coba :)

      • Unknown

        Makasih mas setelah saya coba berhasil :D
        tapi kalau saya tetap pasang jquery ui apakah nggak pengaruh sama plugin nya mas Taufik ???

Komentar telah ditutup.