element Dialog 对话框 拖拽指令

Vue.directive('dragModal', (el) => {
  Vue.nextTick(() => {
    let modal = el.getElementsByClassName('el-dialog')[0]
    let header = el.getElementsByClassName('el-dialog__header')[0]
    header.style.cursor = 'move';
    let left = 0
    let top = 0
    header.onmousedown = e => {
      let startX = e.clientX;
      let startY = e.clientY;
      header.left = header.offsetLeft;
      header.top = header.offsetTop;
      el.onmousemove = event => {
        let endX = event.clientX;
        let endY = event.clientY;
        modal.left = header.left + (endX - startX) + left;
        modal.top = header.top + (endY - startY) + top;
        modal.style.left = modal.left + 'px'
        modal.style.top = modal.top + 'px'
      }
      el.onmouseup = () => {
        left = modal.left
        top = modal.top
        el.onmousemove = null;
        el.onmouseup = null;
      }
    }
  })
})