在vue中封装一个很好用的自定义拖动指令

1.在vue中的使用方法：

drawPortBox:{ parent:'drawPortBox',isCandrag:['title']}  
参数内容  title是生效的区域的class名    drawPortBox是我当前生效的被拖动的框的id名

2. 工具类directive.js内容：

/**
* @description dom拖拽
* @param  controllable {Array}   可进行拖拽的元素className集合
* @param  className    {String}  被点击dom的className
* @param  state        {Boolean} 是否可以拖拽
* @example  
    <div 
      id='accidentSimulation' // 最外层必须是id
      v-candrag="{ 
        parent:'accidentSimulation', // 外层id
        isCandrag:['accidentSimulation-header','header-title']}" // 可以进行拖拽的clss集合
    > 
* 
*/
export default {
  // 定义 Vue 插件
  install(Vue) {
    Vue.directive('candrag', { // 全局指令名为 `v-candrag`
      inserted(el, {value}) {
        const preventDefault = (ev)=>{
          if (ev.preventDefault) {
            ev.preventDefault()
          } else {
            ev.returnValue = false  // 解决快速频繁拖动滞后问题
          }
        }
        const move = (e,el,disx,disy)=>{
          // 鼠标位置-鼠标相对元素位置=元素位置
          let left = e.clientX - disx;
          let top = e.clientY - disy;
          // 限制拖拽范围不超出可视区
          if ( left <= 0) {
            left = 5    // 设置成5,离边缘不要太近
          } else if (left > document.documentElement.clientWidth - el.clientWidth) { // document.documentElement.clientWidth屏幕可视区宽度
             left = document.documentElement.clientWidth - el.clientWidth - 5
          }

         if ( top <= 0) {
            top = 5
          } else if (top > document.documentElement.clientHeight - el.clientHeight) {
             top = document.documentElement.clientHeight - el.clientHeight - 5
          }
          el.style.left = left + 'px'
          el.style.top= top + 'px'
        }
        const onmouseup =()=>{
          el.style.cursor = 'default'
          // 鼠标抬起时，销毁移动事件和鼠标抬起事件
          document.onmousemove = null
          document.onmouseup = null
        }
        if (!value) {
          el.onmousedown = (ev) => {
            el.style.cursor = 'move'
            // 获取鼠标按下时的偏移量（鼠标位置 - 元素位置）
            var disx = ev.pageX- el.offsetLeft;
            var disy = ev.pageY- el.offsetTop;
            preventDefault(ev)
            document.onmousemove =  (e)=> { 
              move(e,el,disx,disy)
            }
          }
          el.onmouseup = ()=> onmouseup()
        } else {
          el.onmousedown = (ev) => {
            let className = ev.target.className
            let controllable = value.isCandrag
            let state = controllable.includes(className)
            if(!state) return
            el.style.cursor = 'move'
            // 获取鼠标按下时的偏移量（鼠标位置 - 元素位置）
            var disx = ev.pageX- el.offsetLeft;
            var disy = ev.pageY- el.offsetTop;
            preventDefault(ev)
            document.onmousemove =  (e)=> { 
              move(e,el,disx,disy)
            }
          }
        }
        el.onmouseup = ()=> onmouseup()
      }
    })
  }
}

在main中注册工具类后 就可以直接使用

import candrag from './utils/directive'
Vue.use(candrag)