效果图
分清clientY pageY screenY layerY offsetY的区别
在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果
- clientY 指的是距离可视页面左上角的距离
- pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
- screenY 指的是距离屏幕左上角的距离
- layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
- offsetY 指的是距离它自己左上角的距离
一张图带大家简单了解了解
在我们简单了解完这些个属性以后,有几个属性需要分清。
相同点 | 不同点 |
---|---|
clientY | 距离页面左上角距离 |
pageY | 距离页面左上角的距离 |
相同点 | 不同点 |
---|---|
layerY | 距离元素的左上角距离 |
offsetY | 距离元素左上角的距离 |
实现拖拽功能
我们既然熟悉了这几个偏移属性的意思,那么我们就进入我们的重点。话不多说直接上代码
// darg.html
<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;