如何使用css translate实现平移？

我试图在视口上实现平移，当鼠标在容器上拖动时，其内部的元素应该移动问题是每次我开始将元素重置拖动到其第一个位置时。
此外，元素内部继承的事件不应该发生，因为点击时偏移量发生了变化。如何使用css translate实现平移？

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

来源

2013-12-12 shuji

*“此外，当开始元素THI内拖动s的动作20px“* 20px与顶部和左边的值相同。删除它，它消失。如果您希望它在20,20开始，请使用与拖动时/拖动后使用的翻译样式相同的翻译样式。 http://jsfiddle.net/dML5t/5/ –

如果我删除它，那么当我开始在元素外部移动那些20也被删除。 – shuji

没错，但是您可以在移动开始时移除它，然后在添加之后添加它，根据需要调整翻译。我的观点是，这是跳跃的来源，你必须补偿它。 –

好吧，我终于做到了：

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

来源

2013-12-12 23:17:48 shuji

Hi @shuji - 我发现当鼠标不在图像区域时，我仍然可以平移。你能纠正它吗？ –

@ Ng2-Fun确定此脚本的目标是将所有内容移动到读取区域内，但只能在灰色方块内工作，您可以在调用其他任何内容之前添加旁边的内容： \t \t if（e.target ！= document.querySelector（'＃move'））return' – shuji

如何使用css translate实现平移？

回答

相关问题