Javascript 翻译图像但不翻译容器中的容器

我正在尝试创建一个Vue组件，它允许用户在放大图像时单击并拖动图像。我希望图像被移动，但是图像当前没有正确地留在容器中，它很近，但无法理解为什么它仍然会从轻微的角度消失，然后卡住

当你们缩小时，我还需要把它保持在画面中

我想不出做这个的计算方法，有人能帮我一下吗？到目前为止，这就是我所拥有的，但你可以看到它并不完全正确

双击或滚动以放大以启动单击和拖动功能

编辑 尝试更新了我的代码，理论上应该是可行的。然而，当我将鼠标移动1个像素时，它会工作，而下一个像素则不会。数据和渲染似乎不同步，因此代码移动更新平移，但在下一个像素内更新

getBoundingClientRect

，然后正确更新，再次将其向后移动，以便图像不会离开容器

我原以为添加

requestAnimationFrame

可以解决这个问题，但事实并非如此

Vue.component（'draggable'{
数据：函数（）{
返回{
加载：对，
ZoomLevel:[1,1.5,2,2.5,3]，
zoomLevel:1，
lastX:0，
拉斯蒂：0，
touchX:0，
敏感：0，
startX:0，
星号:0,，
translateX:0，
translateY:0，
伊斯莫温：错，
IsDraging:错误
}
},
方法：{
handleDoubleClick（）{
设index=this.zoomLevels.indexOf（this.zoomLevel）+1；
if（this.zoomLevels[index]==未定义）{
指数=0；
}
this.zoomLevel=this.zoomLevels[索引]；
},
扶手轮（$活动）{
$event.preventDefault（）；
this.zoomLevel+=$event.deltaY*-0.01；
if（this.zoomLevel<1）{
this.zoomLevel=1；
}
设maxZoom=this.zoomLevels[this.zoomLevels.length-1]；
this.zoomLevel=Math.min（Math.max（.125，this.zoomLevel），maxZoom）；
},
handleMouseDown（$事件）{
如果（$event.button！==0）{
返回；
}
this.isDraging=true；
this.isMoving=true；
this.startX=$event.pageX；
this.startY=$event.pageY；
},
handleMouseUp（$事件）{
如果（$event.button！==0）{
返回；
}
this.isMoving=false；
},
handleMouseMove（$event）{
如果（$event.button！==0）{
返回；
}
if（this.isMoving&&this.isdraging）{
如果（this.zoomLevel！==1）{
让parentBounding=$event.target.parentNode.getBoundingClientRect（）；
让clientBounding=$event.target.getBoundingClientRect（）；
window.requestAnimationFrame（（）=>this.handleTranslate(
{x:$event.pageX，y:$event.pageY}，
{parent:parentBounding，client:clientBounding}
));
返回；
}
handleMovement（{x:$event.pageX，y:$event.pageY}，$event）；
}
},
扶手横板（位置、边界）{
让offsetX=（Math.floor（bounding.parent.left）-Math.floor（bounding.client.left））；
如果（偏移量X>=0）{
offsetX=0；
}
this.translateX=Math.floor（（positions.x-this.startX）+Math.floor（offsetX））；
如果（（Math.floor（bounding.parent.top）-Math.floor（bounding.client.top））>0）{
this.translateY=Math.floor（（positions.y-this.startY））；
}
},
},
计算：{
翻译：函数（）{
返回`translateX（${this.translateX}px）translateY（${this.translateY}px）`；
}
},
模板：“#模板”
});
this.app=new Vue（{}）。$mount（'#app'）
.container{
宽度：200px；
高度：200px；
背景：黑色；
溢出：隐藏；
}
.集装箱img{
宽度：100%；
}