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

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

HTML

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