vue项目中添加一个可拖动的功能按钮

<!--dom结构-->
<!-- 我的待办浮窗按钮（v-drag） -->
<template>
    <div>
        <el-popover
          v-drag
          style="position: absolute;right: 80px;bottom: 80px;z-index: 1;"
          placement="right"
          width="200"
          trigger="hover">
          <template v-if="mytodoData&&mytodoData.length>0">
            <el-row v-for="(item) in mytodoData" :key="item.id" :gutter="20" >
              <el-col :span="24">
                <router-link  :to="item.url+'?id='+item.id"><el-button  type="text">{{ item.creater + '-' + item.type + '-' + item.status}}</el-button></router-link>
              </el-col>
            </el-row>
          </template>
          <template v-else>
            <span class="c_gray">暂无待办事项</span>
          </template>
          <el-badge :value="mytodoData.length" slot="reference">
            <el-button type="primary" round>待办事项</el-button>
          </el-badge>
        </el-popover>
    </div>
</template>
<!--方法-->
export default {
    directives: {
        drag (el, bindings) {
          el.onmousedown = function (e) {
            var disx = e.pageX - el.offsetLeft
            var disy = e.pageY - el.offsetTop
            document.onmousemove = function (e) {
              el.style.left = e.pageX - disx + 'px'
              el.style.top = e.pageY - disy + 'px'
            }
            document.onmouseup = function () {
              document.onmousemove = document.onmouseup = null
            }
          }
        }
    },
    data () {
        return {
            mytodoData: []
        }
    }
}