弹层-自定义拖拽指令

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

封装的弹层

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;       }     }   } }