所以我正在为我的网站旋转和拖动头像图片的图像,我估计我需要3或4个小时才能将这些功能添加到我的网站,现在它已经3天了我没有能够对这个bug做任何事情:当一个元素被旋转时(除0之外的任何程度),每当我试图拖动它时,被拖动元素的宽度和高度都会自动设置为宽度和高度。父母,它与整个min/max-height
和min/max-width
过程混乱(这发生在90度和270度旋转,180度旋转,只有下面的bug存在)。
另一个错误,每当我实际拖动它时,一切都会反转,例如在180度旋转中,当我将图像向右拖动时元素向左移动,而没有180度旋转,一切都会正常工作。
所以请有人在我自杀前给我一个解决方案。
并且小心,在拖动时,我希望我的图像包含在其父级中,因此除了图像之外的任何内容都不会在父级内部显示(你得到这个,我使用的html结构是因为我正在处理个人资料图片),我添加了#child
因为否则,每当我直接将旋转应用到我的图像时,它就会离开它的父级,没有transform-origin
组合可以用于所有不同的图像大小和旋转角度,所以我添加了#child
,这是一个具有相同高度和宽度的元素(因此旋转时元素实际上永远不会从其父元素中移出)并且我将旋转应用于该元素而不是实际的img,我相信你得到#parent
,它只是一个容器,如果你问为什么我在我的jquery中没有使用containment: $("#parent")
,那是因为当我添加它而不是整个{{1拖动变得跳跃而不是我使用当前选项获得的平滑拖动效果(在拖动时运行一个函数)。
这里是小提琴,可以尝试不同的旋转度:https://jsfiddle.net/5kkwsLm8/
drag:function(){}