6.H5全屏拖拽某个图标实现

拖拽图片

<div
        class="upload-files"
        @click="created"
        ref="dragBox"
        @touchstart="touchstartHandle('dragBox', $event)"
        @touchmove.prevent="touchmoveHandle('dragBox', $event)"
      >
        <img src="@/assets/images/add.svg" alt="" />
</div>

  methods: {
    touchstartHandle(refName, e) {
      touchstartHandle(this.$refs[refName], e, this.coordinate);
    },
    touchmoveHandle(refName, e) {
      touchmoveHandle(this.$refs[refName], e, this.coordinate);
    },
  }

封装函数

export const touchstartHandle =  (refDom, e, coordinate) => {
  const element = e.targetTouches[0];
  coordinate.client = {
      x: element.clientX,
      y: element.clientY
  };
  coordinate.elePosition.left = refDom.offsetLeft;
  coordinate.elePosition.top = refDom.offsetTop;
}


export const touchmoveHandle = (refDom, e, coordinate) => {
  e.preventDefault();
  let element = e.targetTouches[0];
  let x = coordinate.elePosition.left + (element.clientX - coordinate.client.x);
  let y = coordinate.elePosition.top + (element.clientY - coordinate.client.y);
  x = x <= 0 ? 0 : x >= window.innerWidth - refDom.offsetWidth ? innerWidth - refDom.offsetWidth : x;
  y = y <= 0 ? 0 : y >= window.innerHeight - refDom.offsetHeight ? innerHeight - refDom.offsetHeight : y;
  refDom.style.left = x + 'px';
  refDom.style.top = y + 'px';
}