el-dialog拖拽功能

渣渣渣的筆記。。。。

開始也是用vue自定義指令來實現，後來發現一個頁面中有兩個el-dialog時，只有一個起作用，求指點。。。

所以寫了一個全局的方法來調用。

 
 ~/utils/dialogDrag.js

 1 export default {
 2   dialogDrag(el) {
 3     let dragDom = el.querySelector('.el-dialog');
 4     let dragDomHeader = el.querySelector('.el-dialog__header');
 5     dragDomHeader.style.cursor = 'move';
 6     dragDomHeader._isDrag = false;
 7     // 滑鼠按下事件
 8     // onmousedown事件綁定之所以在el-dialog__header上，是因為綁定在el-dialog時彈框中的表單會無法編輯
 9     dragDomHeader.onmousedown = (e) => {
10       dragDomHeader._isDrag = true;
11       // 滑鼠相對元素的位置
12       dragDomHeader._startX = e.clientX - dragDomHeader.offsetLeft;
13       dragDomHeader._startY = e.clientY - dragDomHeader.offsetTop;
14       e.preventDefault();
15     };
16     document.onmousemove = (e) => {
17       if (dragDomHeader._isDrag) {
18       // 滑鼠的位置減去滑鼠相對元素的位置得到元素的位置
19         let _endX = e.clientX - dragDomHeader._startX;
20         let _endY = e.clientY - dragDomHeader._startY;
21         dragDom.style.left = _endX + 'px';
22         dragDom.style.top = _endY + 'px';
23       }
24     };
25     document.onmouseup = () => {
26       dragDomHeader._isDrag = false;
27     };
28   }
29 };

 index.vue
 
 1 <template>
 2     <el-dialog @open="openDialog" ref="dialog">
 3     </el-dialog>
 4 </template>    
 5  
 6 <script>
 7     import DialogDrag from '~/utils/dialogDrag';
 8     
 9    methods: {
10        openDialog() {
11           DialogDrag.dialogDrag(this.$refs.dialog.$el);
12        }
13     } 
14 </script>