vue 拖拽移動（類似於iPhone虛擬home ）

vue 移動端 PC 兼容 元素 拖拽移動 

效果演示

 

事件知識點

移動端	PC端	注釋
touchstart	mousedown	鼠標/手指按下事件
touchmove	mousemove	鼠標/手指移動事件
touchend	mouseup	鼠標松開/手指抬起事件

 

實現思路

1.鼠標按下時  記錄 按下狀態  記錄x y軸坐標

2.按下移動時 動態計算坐標 設置拖拽元素 style 控制位置 ;

2.1判斷拖拽區域 溢出時 歸位判斷；

2.2拖拽時 阻止頁面滑動

3.鼠標抬起  修改 按下狀態 

 

上代碼

<template lang="pug">
    //- 當前頁面全局容器
    div.SchemeDetail(
        ref='pageDiv'
        @mousemove="onmousemove($event)" @touchmove="onmousemove($event)"
        @mouseup="onmouseup($event)" @touchend="onmouseup($event)"
    )
      //- 加號拖拽元素   
      div.action-mgr(:class="{ active :mgrState}"
      ref='actionMgr'
      @click="mgrState=!mgrState"
      @mousedown="onmousedown($event)" @touchstart="onmousedown($event)")
        <i class="icon iconfont icon-jia"></i>
   .....
</template>

<script>
export default {
  data() {
    return {
      mgrState: false,
      mousedownState: false, //鼠標默認抬起
      iX: 0,//鼠標坐標 與 拖拽按鈕 間距 x
      iY: 0//鼠標坐標 與 拖拽按鈕 間距 y
    };
  },
  methods: {
    send() {
      console.log("send");
    },
    edit() {
      console.log("edit");
    },
    /* 鼠標按下事件 */
    onmousedown(event) {
      /* 此處判斷  pc 或 移動端 得到 event 事件 */
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      // 鼠標點擊 面向頁面 的 x坐標 y坐標
      let { clientX, clientY } = touch;
      // 鼠標x坐標 - 拖拽按鈕x坐標  得到鼠標 距離 拖拽按鈕 的間距
      this.iX = clientX - this.$refs.actionMgr.offsetLeft;
      // 鼠標y坐標 - 拖拽按鈕y坐標  得到鼠標 距離 拖拽按鈕 的間距
      this.iY = clientY - this.$refs.actionMgr.offsetTop;
      // 設置當前 狀態為 鼠標按下
      this.mousedownState = true;
    },
    /* 鼠標移動事件 */
    onmousemove(event) {
      //鼠標按下 切移動中
      if (this.mousedownState) {
        /* 此處判斷  pc 或 移動端 得到 event 事件 */
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        // 鼠標移動時 面向頁面 的 x坐標 y坐標
        let { clientX, clientY } = touch;
        //當前頁面全局容器 dom 元素  獲取容器 寬高
        let {
          clientHeight: pageDivY,
          clientWidth: pageDivX
        } = this.$refs.pageDiv;
        /* 鼠標坐標 - 鼠標與拖拽按鈕的 間距坐標  得到 拖拽按鈕的 左上角 x軸y軸坐標 */
        let [x, y] = [clientX - this.iX, clientY - this.iY];

        //拖拽按鈕 dom 元素  獲取 寬高 style 對象
        let {
          clientHeight: actionMgrY,
          clientWidth: actionMgrX,
          style: actionMgrStyle
        } = this.$refs.actionMgr;
        /* 此處判斷 拖拽按鈕 如果超出 屏幕寬高 或者 小於  
           設置 屏幕最大 x=全局容器x y=全局容器y 否則 設置 為 x=0 y=0 
        */
        if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
        else if (x < 0) x = 0;
        if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
        else if (y < 0) y = 0;
        // 計算后坐標  設置 按鈕位置
        actionMgrStyle.left = `${x}px`;
        actionMgrStyle.top = `${y}px`;
        actionMgrStyle.bottom = "auto";
        actionMgrStyle.right = "auto";
        //當按下鍵滑動時， 阻止屏幕滑動事件
        event.preventDefault();
      }
    },
    /* 鼠標抬起事件 */
    onmouseup(event) {
      // 設置當前狀態為鼠標抬起
      this.mousedownState = false;
    }
  }
};
</script>