vue 实现pc,h5拖拽悬浮挂件，附带吸边效果

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;'
      }
      if (objs.bottom !== undefined && objs.bottom !== null) {
        str = str + 'bottom:' + objs.bottom + 'p