Mecha versi 2.6.4 sudah dirilis!

Draggable Tanpa jQuery UI

Tabel Konten
  1. Pembaharuan 26 Februari 2013 
  2. Penggunaan 
    1. jQuery 
    2. HTML 

Terkait: JavaScript Draggable

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.