Simple Draggable

by Jayson Buquia

HTML

<div class="draggable">
    <div class="dragger">holder</div>
    <div class="draggable-body">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam soluta id necessitatibus pariatur labore eos tempora fugiat mollitia minus iure rem enim. Officia vel eos amet nostrum dolore voluptates sequi.</div>
        <div class="dragger btn">
            another holder here
        </div>
    </div>
</div>

CSS

.draggable {
    border: 1px solid silver;
    width : 300px;
    padding: 10px;
    box-sizing: border-box;
}
.draggable-body {
    padding: 10px;
}
.dragger {
    padding: 10px;
    background: blue;
    color: white;
    cursor: move;
}

.btn {
    display: table;
    padding: 5px 15px;
    border: none;
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

(function (draggable) {

    var dragger = draggable.find('.dragger'),
        dPos, // draggable positions       
        posDiff; // difference on positions

    // handle mouse events
    dragger.on('mousedown', function (e) {

        dPos = draggable.offset();
        
        // fix draggable
        draggable.offset(dPos);

        // compute differences
        posDiff = {
            top: e.pageY - dPos.top,
            left: e.pageX - dPos.left
        };   
        
        // prevent selection
        draggable.addClass('unselectable');

        // reposition draggable on mouse move
        draggable.on('mousemove', function (f) {
            var newPos = {
                left: f.pageX - posDiff.left,
                top: f.pageY - posDiff.top
            };

            draggable.offset(newPos);
            
        }).on('mouseup mouseleave', function () {
            $(this).unbind('mousemove');
            draggable.removeClass('unselectable');
        });

    });

})($('.draggable'));