Draggable Tanpa jQuery UI
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>
Labels: JavaScript, jQuery, Potongan
15 Comments:
Whoaaa!! makin dahsyat aja ni Mas Taufik! :-bd \o/
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
@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.
itu catur lawannya siapa???
Mantep Kang \o/ , saya mau lanjut nge Save page2 di blog ini.
:D
Iya mantep banget, asik nih kalau dijadiin game catur buat blog :D
udah lama nyerah, pas di coba lagi baru ngeuh.
skrng udah bisa di geser2 post hoempagenya :-bd
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.
Hi,
Great plugin, thanks! Is it possible to make it not follow links when you drag a box by a link inside it?
Yes:
$(function() {
$('.box').drags().find('a').click(function() {
return false; // Disable links inside the `.box`
});
});
Brilliant Cheers
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 :)
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;
}
Wah makasih mas .. :D saya akan langsung coba :)
Makasih mas setelah saya coba berhasil :D
tapi kalau saya tetap pasang jquery ui apakah nggak pengaruh sama plugin nya mas Taufik ???
Post a Comment
<< Home