vue实现移动弹出框

<template>
  <div>
    <div>
      <a-button type="primary" @click="showModal">Open Modal</a-button>
      <a-modal v-model="visible" title="Basic Modal" @ok="handleOk">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </a-modal>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      flag : false,
      DomItem:'',
    };
  },
  mounted() {
    document.addEventListener("mousedown",this.drag);
    document.addEventListener("mousemove",this.drag);
    document.addEventListener("mouseup",this.drag);
    
  },
  methods: {
    drag(ev) {
      let evt = ev || window.ev;
      if(evt.type =='mousedown'){
        if(this.DomItem.classList == 'ant-modal'){
         console.log(evt,'evt')
          this.flag = true
        }
      }
      if(this.flag){
        if(evt.type =='mousemove'){
          this.DomItem.style.cursor = 'move'
          this.DomItem.style.margin =0
          this.DomItem.style.left = evt.clientX + "px";
          this.DomItem.style.top = evt.clientY + "px";
        }
      }
      if(evt.type == 'mouseup'){
        this.flag = false
      }
      
    },
    showModal() {
      this.visible = true;
      this.$nextTick(()=>{
        this.DomItem = document.getElementsByClassName("ant-modal")[0]
      })
    },
    handleOk() {
      this.visible = false;
      this.DomItem = null
    },
  }  
}

</script>

<style>
.title {
  width: 200px;
  height: 200px;
}
</style>

存在bug: 点击的时候会到鼠标点击的位置

解决方案:在左上定义个按钮/或者拖动的区域,

希望大佬给其他的解决方案!!!