如何使用GSAP在overflow：hidden容器中拖动元素？

Question

我会尽量保持简洁。

我需要在我的项目中使用GSAP的可拖动插件。这个插件很棒，效果很好。我认为我的问题只是我不太了解的问题。

Codepen： https://codepen.io/mhcdotcom/pen/dzyNmB

拖动#stage元素可以实现单击和拖动功能。
.inner元素延伸到容器div之外，因此我在stage元素上使用overflow:hidden。
当我这样做时，.inner元素的一部分延伸到可视区域之外并没有进入框架并且似乎被切断了。

在GSAP中有解决方法吗？我错过了什么？

我用google搜索无济于事。

非常感谢任何帮助 谢谢

萌

Answer 1

“全部”可拖动的是添加到拖动元素的转换，因此任何溢出等仍将被尊重。

我无法100％确定您要实现的目标，但您可以在dragStart / dragEnd上添加类，这意味着您应该能够获得所需的行为。

我已经分叉了一个代码集给你一个基本的例子。

onDragStart: function() {
  stage.classList.add('dragging');
},
onDragEnd: function() {
  stage.classList.remove('dragging');
}

https://codepen.io/motionimaging/pen/xLxLpG