Draggable Tanpa jQuery UI
Tabel Konten
Terkait: JavaScript Draggable
$(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');
});
});
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:
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.
Beben Koben
itu catur lawannya siapa???
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:
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:
Tambahkan juga kode CSS ini untuk menetralkan CSS transisi supaya langkahnya tidak berat:
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 ???