vue 实现文本的拖拽_基于Vue实现拖拽效果

效果图

分清clientY pageY screenY layerY offsetY的区别

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

clientY 指的是距离可视页面左上角的距离

pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)

screenY 指的是距离屏幕左上角的距离

layerY 指的是找到它或它父级元素中最近具有定位的左上角距离

offsetY 指的是距离它自己左上角的距离

一张图带大家简单了解了解

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

相同点

不同点

clientY

距离页面左上角距离

受页面滚动的影响

pageY

距离页面左上角的距离

不受页面滚动影响

相同点

不同点

layerY

距离元素的左上角距离

受元素的定位的影响，会从本元素往上找到第一个定位的元素的左上角

offsetY

距离元素左上角的距离

计算相对于本元素的左上角，不在乎定位问题，计算的是内交点。是IE浏览器的特有属性

实现拖拽功能

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