Question

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

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

如何使用css translate实现平移？

1 个答案: