c
分清clientY pageY screenY layerY offsetY的区别
在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果
- clientY 指的是距离可视页面左上角的距离
- pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
- screenY 指的是距离屏幕左上角的距离
- layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
- offsetY 指的是距离它自己左上角的距离
在简单了解完这些个属性以后,有几个属性需要分清。
相同点 | 不同点 | |
---|---|---|
clientY | 距离页面左上角距离 | 受页面滚动的影响 |
pageY | 距离页面左上角的距离 | 不受页面滚动影响 |
相同点 | 不同点 | |
---|---|---|
layerY | 距离元素的左上角距离 | 受元素的定位的影响,会从本元素往上找到第一个定位的元素的左上角 |
offsetY | 距离元素左上角的距离 | 计算相对于本元素的左上角,不在乎定位问题,计算的是内交点。是IE浏览器的特有属性 |
实现拖拽功能
1. h5实现拖拽
---html---
<template>
<div>
<div
ref="drag"
@click.prevent="onNext"
@touchstart.prevent="down"
@touchmove.prevent="move"
@touchend.prevent="end"
:style="getPosition">
<img :src="imageUrl" class="icon" />
</div>
</div>
</template>
js
<script>
export default {
name: 'Drag',
props:{positionInit:Object}
data () {
return {
flags: false,
position: {
x: 0,
y: 0
},
positionStyles: {
top: 0,
left: 0,
right: 0,
bottom: 0
},
nx: '',
ny: '',
maxW: '',
maxH: '',
initLeftRight: 20
}
},
computed: {
getPosition () {
const objs = this.positionStyles
let str = ''
if (objs.top !== undefined && objs.top !== null) {
str = str + 'top:' + objs.top + 'px;'