Draggable Without JQuery UI

by ChangJoo Park

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    cursor: move;
    width:70px;
    height:70px;
    background:black;
    z-index: 1;
    margin:2px;
    float:left;
}
.active {
    background: grey;
    z-index: 2;
}

JavaScript

$('div').on('mousedown', function (e) {

    $(this).addClass('active');
    
    var oTop = e.pageY - $('.active').offset().top;
    var oLeft = e.pageX - $('.active').offset().left;
    
    $(this).parents().on('mousemove', function (e) {

        $('.active').offset({

            top: e.pageY - oTop,
            left: e.pageX - oLeft

        }).on('mouseup', function () {

            $(this).removeClass('active');

        });
        
    });
    
    return false;    
});