基于Vue实现拖拽效果

原创 Fly丶 教程 vue专题 79阅读 14 天前 举报

效果图

分清clientY pageY screenY layerY offsetY的区别

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

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

区别

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

相同点不同点
clientY距离页面左上角距离受页面滚动的影响
pageY距离页面左上角的距离不受页面滚动影响
相同点不同点
layerY距离元素的左上角距离受元素的定位的影响,会从本元素往上找到第一个定位的元素的左上角
offsetY距离元素左上角的距离计算相对于本元素的左上角,不在乎定位问题,计算的是内交点。是IE浏览器的特有属性

layerY与offsetY区别

实现拖拽功能

我们既然熟悉了这几个偏移属性的意思,那么我们就进入我们的重点。话不多说直接上代码

// darg.html

当然,我们可以将它绑定为一个自定义指令,这样的话就可以用调用指令的形式来实现拖拽效果,下面是定义自定义指令的代码

// darg.html

最后

到这里我们就已经把拖拽效果用Vue实现了,我们用了两种不同的方式实现了拖拽,但实际上换汤不换药,我们需要弄清楚pageY、screenY、clientY、layerY、offsetY等区别。当然我们同时也学习了Vue的一些方法,例如自定义指令等。

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

赶紧努力消灭 0 回复