基于Vue实现拖拽效果

最新推荐文章于 2024-08-09 11:26:56 发布

霜如明月

最新推荐文章于 2024-08-09 11:26:56 发布

阅读量8.2k

点赞数 5

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/q3254421/article/details/84540985

版权

本文介绍了在Vue中实现拖拽效果，详细讲解了clientY、pageY、screenY、layerY和offsetY的区别，并提供了两种实现拖拽功能的代码示例，包括使用自定义指令的方式。

摘要由CSDN通过智能技术生成

效果图

分清clientY pageY screenY layerY offsetY的区别

在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果

clientY 指的是距离可视页面左上角的距离
pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
screenY 指的是距离屏幕左上角的距离
layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
offsetY 指的是距离它自己左上角的距离
一张图带大家简单了解了解

区别

在我们简单了解完这些个属性以后，有几个属性需要分清。

	相同点	不同点
clientY	距离页面左上角距离	受页面滚动的影响
pageY	距离页面左上角的距离	不受页面滚动影响

	相同点	不同点

关注

专栏目录