Why is dragging with css translate jumping?

I am trying to drag a container using transform translate but something is causing a jumpy behavior and I can't figure out what is the cause.
UPDATE: This must work on elements when their container is not always positioned at 0,0 from the document.

http://jsfiddle.net/dML5t/2/

HTML:

<div id=container style="position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;">
    <div id=tcontainer style="position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;">
        <div id=move style="position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;">
    </div>
</div>

Javascript:

obj = {startPositionX:0,startPositionY:0};
$('#move').on("mousedown",function(){
    var move = $(this);
    obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
    obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
    $(document).on("mousemove",function(e){
        console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
        move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});