javascript - 如何使用CSS Translate实现平移？

Question

我正在尝试在视口(viewport)上实现平移，当鼠标在容器上拖动时，其内部的元素应该移动，问题是每次我开始拖动元素时都会重置到其第一个位置。
此外，内部元素继承了不应发生的事件，因为单击时偏移量会发生变化。

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

好吧，我终于成功了:

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");
});