当前位置： 移动技术网 > IT编程>开发语言>JavaScript > el-dialog拖拽功能

el-dialog拖拽功能

2020年04月18日  | 移动技术网IT编程  | 我要评论

渣渣渣的笔记。。。。

开始也是用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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网