弹层-自定义拖拽指令

自己写的拖拽指令，虽然代码不是很好，留着以后用，万一遇到了就不用重新写了 哈哈

封装的弹层

export default {
// 渲染绑定
  bind(el, binding) {
    // 弹窗的容器
    const domDrag = el;
    // 绑定头部可以拖动
    const headDom = el.querySelector('.dialog-header')
    // 因为本项目用在3840*1080大屏上面  弹窗的所在位置写死了 根据个人项目自己调整
// binding.value.width  binding.value.height  这是设置的弹窗大小

    domDrag.style.left = domDrag.style.left != '0px' ? domDrag.style.left : (3840 - binding.value.width) / 2 + 'px';
    domDrag.style.top = domDrag.style.top != '0px' ? domDrag.style.top : (1200 - binding.value.height) / 2 + 'px';
    
    // 鼠标按下，开始拖拽
    headDom.onmousedown = (e) => {
      domDrag.style.cursor = 'move'// 改变光标形状
      let clientX = e.clientX;
      let clientY = e.clientY;
      let disX = e.clientX - e.offsetX;
      let disY = e.clientY - e.offsetY;
      document.onmousemove = function (e) {
        let x = e.clientX - clientX;
        let y = e.clientY - clientY;
        if ($(domDrag)[0].offsetLeft + x < 20) {
          return
        }
        domDrag.style.left = $(domDrag)[0].offsetLeft + x + 'px';
        clientX = e.clientX;
        if ($(domDrag)[0].offsetTop + y < 20) {
          return;
        }
        domDrag.style.top = $(domDrag)[0].offsetTop + y + 'px';
        clientY = e.clientY;
      }
      document.onmouseup = function (e) {
        domDrag.style.cursor = ''// 改变光标形状
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
}