Vue-cli 实现拖拽窗口

<template>
  <div id="ElementWind" v-show="isOpenWind " class="dragclass"  @mousedown="drag">
    <div id="imgHead">
      <a href="#"  @click="isOpenWind = false">x</a>
    </div>
    <div id="imgBody">
      <div id="imgContent"></div>
      <div id="imgBtn"></div>
    </div>
  </div>
</template>
<script>
export default {
   data(){
      return {
        isOpenWind :true  //点击X关闭窗口
      }
   },
   methods:{
     //鼠标按下拖拽
     drag(e){
        // console.log(e)
        var oDiv = e.path[1];
        var disX = e.clientX - oDiv.offsetLeft;
        var disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = function(e){
            e.preventDefault();
            var l = e.clientX - disX;
            var t = e.clientY - disY;
            oDiv.style.left = l + "px"
            oDiv.style.top = t + "px"
        } 
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
     }
   }
}
</script>

<style scoped>
#ElementWind {
  text-align: center;
  width: 500px;
  height: 377px;
  position: absolute;
  left: 15px;
  bottom: 250px;
  border: 1px solid #57a3f3;
  background: #fff;
}

a {
  padding-right: 5px;
  text-decoration: none;
  color: #fff;
}

a:hover {
  color: #fff;
}

#imgHead {
  width: calc(100% + 1px);
  text-align: right;
  padding: 4px 0;
  /* border: 1px solid #003399; */
  background: #57a3f3;
  font-size: 11px;
  color: #3366ff;
  cursor: move;
  /* margin-top: -21px; */
}

#imgHead a:link,
#imgHead a:visited {
  font-size: 14px;
  font-weight: bold;
  padding: 0 3px;
}

#imgBody {
  width: 100%;
  height: calc(100% - 23px);
  /* margin-top: -21px; */
  text-align: center;
}

#imgContent {
  height: 324px;
  padding: 2px;
  /* margin-top: -21px; */
  /* overflow-y: scroll; */
  /* word-break: break-all */
}

#imgBtn {
  width: 100%;
  height: 22px;
  background-color: #ccc;
  /* margin-top: -21px;   */
}

</style>