el-dialog拖拽功能

 

开始也是用vue自定义指令来实现，后来发现一个页面中有两个el-dialog时，只有一个起作用，求指点。。。

所以写了一个全局的方法来调用。

 
 ~/utils/dialogDrag.js

 1 export default {
  dialogDrag(el) {
    let dragDom = el.querySelector('.el-dialog');
    let dragDomHeader = el.querySelector('.el-dialog__header');
    dragDomHeader.style.cursor = 'move';
    dragDomHeader._isDrag = false;
    // 鼠标按下事件
    // onmousedown事件绑定之所以在el-dialog__header上，是因为绑定在el-dialog时弹框中的表单会无法编辑
    dragDomHeader.onmousedown = (e) => {
      dragDomHeader._isDrag = true;
      // 鼠标相对元素的位置
      dragDomHeader._startX = e.clientX - dragDomHeader.offsetLeft;
      dragDomHeader._startY = e.clientY - dragDomHeader.offsetTop;
      e.preventDefault();
    };
    document.onmousemove = (e) => {
      if (dragDomHeader._isDrag) {
      // 鼠标的位置减去鼠标相对元素的位置得到元素的位置
        let _endX = e.clientX - dragDomHeader._startX;
        let _endY = e.clientY - dragDomHeader._startY;
        dragDom.style.left = _endX + 'px';
        dragDom.style.top = _endY + 'px';
      }
    };
    document.onmouseup = () => {
      dragDomHeader._isDrag = false;
    };
  }
};

 

 

 index.vue
 
 1 <template>
    <el-dialog @open="openDialog" ref="dialog">
    </el-dialog>
</template>    
 
<script>
    import DialogDrag from '~/utils/dialogDrag';
    
   methods: {
       openDialog() {
          DialogDrag.dialogDrag(this.$refs.dialog.$el);
       }
    } 
</script>