Untitled

Draggable div without jQuery UI
var X, Y;

$(this).mousedown(function() {
    $(this).offset({
        left: X,
        top: Y
    });
});

$("#containerDiv").mousemove(function(event) {
    X = event.pageX;
    Y = event.pageY;
});

$(document).ready(function() {
    var $dragging = null;

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            $dragging.offset({
                top: e.pageY,
                left: e.pageX
            });
        }
    });


    $(document.body).on("mousedown", "div", function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});

function endMove() {
    $(this).removeClass('movable');
}

function startMove() {
    $('.movable').on('mousemove', function(event) {
        var thisX = event.pageX - $(this).width() / 2,
            thisY = event.pageY - $(this).height() / 2;

        $('.movable').offset({
            left: thisX,
            top: thisY
        });
    });
}
$(document).ready(function() {
    $("#containerDiv").on('mousedown', function() {
        $(this).addClass('movable');
        startMove();
    }).on('mouseup', function() {
        $(this).removeClass('movable');
        endMove();
    });

});

#containerDiv {
    background:#333;
    position:absolute;
    width:200px;
    height:100px;
}

$(document).ready(function() {

function endMove() {
$(document).off('mousemove');
}

function startMove(me) {
$(document).on('mousemove', function(event) {
    var thisX = event.pageX - me.width() / 2,
        thisY = event.pageY - me.height() / 2;

    me.offset({
        left: thisX,
        top: thisY
    });
});
}

$("#containerDiv").on('mousedown', function() {
    $(this).addClass('movable');
    startMove($(this));
}).on('mouseup', function() {
    $(this).removeClass('movable');
    endMove();
});
});