X
X
X
Website Search®
X
Blog Archive®

❖ Draggable Tanpa JQuery UI

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');
});
});

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://dte-project.googlecode.com/svn/trunk/jquery-draggable/draggable.min.js"></script>
<script>
$(function() {
$('.box').drags();
});
</script>

HTML

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

Posting Komentar