vue自定义指令之 弹框拖拽指令

开发中如需使用自己开发的弹框并要求带有拖动的功能，可参考本文   可根据需求自行修改

Vue.directive('dialogDrag', {
  inserted:function(el) {
    const dragDom = el.querySelector('.move');
    dragDom.style.cursor = 'move';
    dragDom.onmousedown = (e) => {
      event.stopPropagation();
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft;
      const disY = e.clientY - el.offsetTop;
      let selectLeft,selectTop,boxLeft,boxTop
      document.onmousemove = (e)=>{
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        //移动当前元素
        el.style.left = left + 'px';
        el.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  }
})

<div class="box" v-dialogDrag>
   <div class="top move" ></div>
</div>

 

当鼠标放在灰色部分的时候，就可以移动整个盒子

注意  外层的盒子一定要有写定位