vue 自定义指令拖拽DIV

<template>
  <div class="tips" @click="gotoSugges" title="建议反馈" v-drag data-draggable="false" id="dragbtn"></div>
</template>
<script>
import { isDev } from "@/config";
export default {
  name: "SuggestionEntry",
  props: {
    pageName: { type: String, default: "" },
  },
  data() {
    return {
      windowWidth:0,
      windowHeight:0
    };
  },
  directives: {
    drag (el,binding,vnode) {
      let oDiv = el,firstTime = '',lastTime = '';
      let _this = vnode.context;
      document.onselectstart = function () {
      }
      oDiv.onmousedown = function (e) {
        document.getElementById('dragbtn').setAttribute('data-draggable',false);
        firstTime = new Date().getTime();
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.onmousemove = function (e) {
          let l = e.clientX - disX
          let t = e.clientY - disY
          if(l < 0){
            l = 0;
          }else if(l > _this.windowWidth - 56){
            l = _this.windowWidth - 56;
          }
          if(t < 0){
            t = 0;
          }else if(t > _this.windowHeight - 56){
            t = _this.windowHeight - 56;
          }
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
        }
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
          lastTime = new Date().getTime();
          if( (lastTime - firstTime) < 200){
            document.getElementById('dragbtn').setAttribute('data-draggable',true);
          }
        }
        return false
      }
    }
  },
  mounted(){
      this.windowWidth = document.body.clientWidth;
      this.windowHeight = document.documentElement.clientHeight;
      window.onresize = () => {
        return (() => {
          this.windowWidth = document.body.clientWidth;
          this.windowHeight = document.documentElement.clientHeight;
          document.getElementById('dragbtn').style.left = this.windowWidth-56 +'px';
          document.getElementById('dragbtn').style.top = this.windowHeight-56 +'px';
        })();
      };
  },
  methods: {
    mousedowm (e) { 
      this.mouseDownX = e.pageX
      this.mouseDownY = e.pageY
      this.flag = true
    },
    mousemove (e) {
      if (this.flag) {
        console.log('e :', e)
      }
    },
    gotoSugges() {
      let isClick = document.getElementById('dragbtn').getAttribute('data-draggable');
      if(isClick !== 'true') {
        return false
      }
      if (isDev) {
        this.$router.push({ name: "suggestion" });
      } else {
        let win = window.open("suggestion", "_self");
        win.opener = null;
      }
    },
  },
};
</script>

<style scoped lang="less">
.tips {
      background: url(../../assets/imgs/suggest-default.png) no-repeat 0 0;
      width: 56px;
      height: 56px;
      position: fixed;
      bottom: 15px;
      right: 15px;
      z-index: 99999;
      cursor: pointer;
      border-radius: 50%;
      box-shadow: 0px 0px 21px 0px rgba(129,165,204,0.27); 
      background-size: 100% auto;
      cursor: pointer;
      &:hover {
        background-image: url(../../assets/imgs/suggest-hover.png);
      }
    }
</style>

项目中用到的：拖拽div功能，同时做了边界判断。