How to implement panning using css translate?

Question

I'm trying to implement pan on a viewport, when the mouse is dragging on the container its element inside should move the problem is every time I start dragging the element resets to its first position.
Also the element inside inherits the event which shouldn't happen because offset change when it's clicked.

http://jsfiddle.net/dML5t/7/

<div id=container>
   <div id=move>
</div>

Javascript:

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

Answer 1

Ok, I finally made it:

http://jsfiddle.net/dML5t/8/

var obj = {startPositionX:0,startPositionY:0}; //mouse position
var scale=1.0;
var translate = {x:0,y:0}; //element relative position
$('#container').on("mousedown",function(e){
    var container = $(this);
    var move = $('#move');
    obj.startPositionX=e.pageX-translate.x;
    obj.startPositionY=e.pageY-translate.y;
    $(document).on("mousemove",function(e){
        translate.x=e.pageX-obj.startPositionX;
        translate.y=e.pageY-obj.startPositionY;
        move.css('transform','scale('+scale+') translate('+translate.x+'px, '+translate.y+'px)');
    });
});
$(document).on("mouseup",function(){
    $(this).off("mousemove");
});