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>