使用方式

 <div class="flex-center " style="width:300px;height:300px;border:solid 1px #eee">
           <a-icon v-drag.inner="onDragEnd" type="plus-circle" theme="filled" class="add-icon" />
 </div>

源码

export default {
  inserted: function(el, binding) {
    const { inner } = binding.modifiers // 是否在父级内
    const { value } = binding // 回调函数
    const parentNode = el.parentNode
    if (inner) parentNode.style.position = "relative"
    el.style.position = "absolute"

    el.onmousedown = function(ev) {
      let oEvent = ev || window.event
      oEvent.stopPropagation()
      /* 
              一、clientX、clientY
              点击位置距离当前body可视区域的x，y坐标

              二、pageX、pageY
              对于整个页面来说，包括了被卷去的body部分的长度

              三、screenX、screenY
              点击位置距离当前电脑屏幕的x，y坐标

              四、offsetX、offsetY
              相对于带有定位的父盒子的x，y坐标
           */
      // clientX
      // clientWidth = width+左右padding
      // offsetWidth  offsetWidth = width + 左右padding + 左右boder
      // offsetLeft   元素本身到浏览器内侧的距离
      // 当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父
      // 级都没有定位，则分别是到body 顶部 和左边的距离
      // let obj = document.getElementsByClassName("active")[0];
      let disX1 = oEvent.clientX - el.offsetLeft
      let disY1 = oEvent.clientY - el.offsetTop
      let pW = parentNode.clientWidth
      let pH = parentNode.clientHeight
      let eW = el.offsetWidth
      let eH = el.offsetHeight
      document.onmousemove = function(ev) {
        let oEvent = ev || window.event
        let l = oEvent.clientX - disX1
        let t = oEvent.clientY - disY1

        if (inner) {
          if (l < 0) {
            l = 0
          }
          if (l > pW - eW) {
            l = pW - eW
          }
          if (t < 0) {
            t = 0
          }
          if (t > pH - eH) {
            t = pH - eH
          }
        }
        el.style.left = l + "px"
        el.style.top = t + "px"
      }
      document.onmouseup = function() {
        document.onmousemove = null
        document.onmouseup = null

        let top = parseInt(getStyle(el, "top"))
        let left = parseInt(getStyle(el, "left"))

        let x = (top / (pW - eW)) * 100
        let y = (left / (pH - eH)) * 100
        
        // 回调
        value && value({ x, y, top, left })
      }
      return false
    }
  },
}

function getStyle(element, attr) {
  if (!element || !attr) return console.warn("获取样式方法未传参")
  if (element.currentStyle) {
    return element.currentStyle[attr]
  } else {
    return getComputedStyle(element, false)[attr]
  }
}

目录结构

注册指令

import Vue from 'vue'
const content = require.context('./modules', true, /\.js$/)
let modules = {}
content.keys().forEach((d) => {
    const dModle = content(d)
    let arr = d.split('/')
    let name = arr[arr.length - 1].split('.js')[0]
    let namespace = {}
    namespace[name] = dModle.default
    modules = { ...modules, ...namespace }
})

Object.keys(modules).forEach((key) => {
    Vue.directive(key, modules[key])
})