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

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

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

最佳答案

好的，我终于做到了：

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

关于javascript - 如何使用CSS转换实现平移？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20555310/