Simple Draggable Demo

by rodneyrehm

HTML

<div id="dragme">drag me</div>

<output>Events</output>

CSS

#dragme {
    display: inline-block;
    padding: 10px;
    background: #EEE;
    color: #333;
    top: 10px;
    left: 10px;
    position: absolute;
}
output {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: #EFEFEF;
    padding: 5px;
}

JavaScript

var $doc = $(document),
    $moving = null,
    mouse = {x: 0, y: 0},
    pos = {x: 0, y: 0},
    move = function(e) {
        $moving.css({
            left: pos.x + e.pageX - mouse.x,
            top: pos.y + e.pageY - mouse.y
        });
    },
    events = {
        mousedown: function(e) {
            log('down');
            $moving = $(this);
            mouse.x = e.pageX;
            mouse.y = e.pageY;
            pos.x = parseInt($moving.css('left'), 10);
            pos.y = parseInt($moving.css('top'), 10);
            $doc.on('mousemove.dragger', move);
        },
        mouseup: function(e) {
            log('up');
            $moving = null;
            $doc.off('mousemove.dragger');
        },
        click: function(e) {
            log("click");
        }
    },
    $out = $('output'),
    log = function(message) {
        $out.text($out.text() + " " + message);
    };

$('#dragme').on(events);