Vuejs自定義指令實作移動端和pc端的div隨意拖拽。

在Vue里提倡操作虛擬dom盡量不操作真實是dom，但在頻繁操作dom的情況下顯然體驗不好，使用Js操作真實dom來實作div的隨意拖拽，
這里為了復用，寫成了指令，方便其他頁面使用，直接調指令，不需要重復寫，

pc端：

<template>
  <div class="ha">
    <div class="box"  v-wahaha></div>
  </div>
</template>
<script>
export default {
  data(){
    return{x:"",y:"",}
  },
  mounted(){
    let box = document.querySelector('.box')
    let move = JSON.parse(window.localStorage.getItem("move"))
    box.style.left = move.x
    box.style.top = move.y
  },
  directives:{
    wahaha(el,binding){
      el.onmousedown = function(ev){
        var x = ev.clientX - el.offsetLeft;
        var y = ev.clientY - el.offsetTop;
        el.onmousemove = function(ev){
          window.localStorage.removeItem("move")
          this.x = ev.clientX - x + 'px';
          this.y = ev.clientY - y + "px" ;
          el.style.left = this.x
          el.style.top = this.y
          window.localStorage.setItem("move",JSON.stringify({x:this.x,y:this.y}))
        }
      // window.localStorage.setItem("move",this.x)  拿不到
       el.onmouseup = function(ev){
       el.onmousemove = el.onmouseup = null;
       }
       return false;
      }
    }
  }
}
</script>
<style scoped>
.box{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  background: red;
}
</style>

用到的div直接加上 V-wahaha指令即可，
pc端可能存在瀏覽器兼容，可根據自己的需要優化，
圖解：

移動端：

代碼復制直接用，

<template>
  <div >
    <div id="box" v-wahaha></div>
  </div>
</template>
  <script type="text/javascript">
  export default {
    mounted(){
      this.$nextTick(()=>{
        var box = document.getElementById('box')
        var move = JSON.parse(window.localStorage.getItem("move"));
        box.style.left = `${move.x}px`;
        box.style.top = `${move.y}px`;
      })
    },
    directives:{
      drag(el,binding){
        var lenX //定義x軸相對手指點擊位置距離盒子元素左邊框距離
        var lenY //定義y軸相對手指點擊位置距離盒子元素上邊框距離
        var maxW //定義盒子在x軸上可移動的最大值
        var maxH //定義盒子在y軸上可移動的最大值
        el.addEventListener('touchstart',function(e){//按下去時
          maxW = e.srcElement.offsetParent.clientWidth-el.offsetWidth;
          maxH = e.srcElement.offsetParent.clientHeight-el.offsetHeight;
          //  maxW = document.body.clientWidth/clientHeight - el.offsetWidth;
          var ev = e || window.event;
          var touch = ev.targetTouches[0];
          lenX = touch.clientX - el.offsetLeft;
          lenY = touch.clientY - el.offsetTop;
           el.addEventListener("touchmove",defaultEvent,false);//注釋后 靠邊彈性回傳
           window.localStorage.removeItem("move")
       })
        el.addEventListener('touchmove',function(e){//拖動時
        var ev = e || window.event;
        var touch = ev.targetTouches[0];
        var left = touch.clientX - lenX;
        var top = touch.clientY - lenY;
        if(left<0){
           left=0;
        }else if (left>=maxW) {
            left=maxW;
        }
        if(top <0){
            top =0;
        }else if (top >=maxH) {
            top =maxH;
        }
        el.style.left = left + 'px';
        el.style.top = top + 'px';
        window.localStorage.setItem("move",JSON.stringify({x:left,y:top}))
      })
        el.addEventListener('touchend',function(){ //松開時
        document.removeEventListener("touchmove",defaultEvent);
        })
        function defaultEvent(e) {
          e.preventDefault();
        }
      }
    },
  }
</script>
<style media="screen">
  #box {
    width: 100px;
    height: 100px;
    left: 10px;
    top: 10px;
    background:pink;
    position: absolute;
  }
</style>

圖解：

以上封的是區域指令，只可在當前頁面使用指令，
以下是全域指令，可在所有頁面使用指令，

Vue.directive("wahaha",
  (el,binding)=>{
    var lenX //定義x軸相對手指點擊位置距離盒子元素左邊框距離
    var lenY //定義y軸相對手指點擊位置距離盒子元素上邊框距離
    var maxW //定義盒子在x軸上可移動的最大值
    var maxH //定義盒子在y軸上可移動的最大值
    el.addEventListener('touchstart',function(e){//按下去時
      maxW = e.srcElement.offsetParent.clientWidth-el.offsetWidth;
      maxH = e.srcElement.offsetParent.clientHeight-el.offsetHeight;
      //  maxW = document.body.clientWidth/clientHeight - el.offsetWidth;
      var ev = e || window.event;
      var touch = ev.targetTouches[0];
      lenX = touch.clientX - el.offsetLeft;
      lenY = touch.clientY - el.offsetTop;
       el.addEventListener("touchmove",defaultEvent,false);//注釋后 靠邊彈性回傳
       window.localStorage.removeItem("move")
    })
    el.addEventListener('touchmove',function(e){//拖動時
    var ev = e || window.event;
    var touch = ev.targetTouches[0];
    var left = touch.clientX - lenX;
    var top = touch.clientY - lenY;
    if(left<0){
       left=0;
    }else if (left>=maxW) {
        left=maxW;
    }
    if(top <0){
        top =0;
    }else if (top >=maxH) {
        top =maxH;
    }
    el.style.left = left + 'px';
    el.style.top = top + 'px';
    window.localStorage.setItem("move",JSON.stringify({x:left,y:top}))
    })
    el.addEventListener('touchend',function(){ //松開時
    document.removeEventListener("touchmove",defaultEvent);
    })
    function defaultEvent(e) {
      e.preventDefault();
    }
  }
)

有好的優化的歡迎指出，有幫助到就給個支持吧，，，，，