可视区域内拖拽绝对居中的小黄鸭

原创 soadesA 随笔 随记 247阅读 28 天前 举报

需求场景:聊天信息内的图片点击放大后,在可视局域内可以拖拽。

思路:使用定位属性实现该功能。为避免快速拖动图片出现异常,我在图片上面增加了一个“玻璃”,将这个“玻璃”一起放入一个盒子里面。通过改变盒子的偏移量来达到效果。左偏移量 = 点击位置距离浏览器左边界 - 点击位置距离图片左边界 - 可视局域左侧距离浏览器左边界 + 图片自身的一半;上偏移量同理。这里解释一下为什么要加上图片自身的一半,因为图片是绝对居中的,如果你图片不需要绝对居中就不需要了,且边界需要处理一下。

定位代码如下:

边界判断:

完整代码如下:(图片来自百度)

vue的方法:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复