element组件拖动效果，仅供备份参考!

文章目录

• 前言
• 一、如何在 elementUI el-dialog 对话框添加拖拽操作？
• • 1. 首先我们将新建一个js文件 dialog.js 放在项目的对应位置，将下面代码复制到文件中；
  • 1. 其次我们要在 main.js 文件中引入该 js 文件；
  • 1. 在其他 vue 文件中使用可拖动的 el-dialog ；
• 二、效果展示
• • 1.树表触摸对话框顶部时就会出现拖动的鼠标样式，按住鼠标就可以拖动对话框到窗口任意位置了
• 总结

---

前言

我们在使用 elementUI 中的 el-dialog 对话框组件时，位置默认是经过设置的固定位置，会遮挡住对话框后面的文本，在使用时想看下后面的文本需要关闭对话框再操作，效果非常的不理想，要是对话框可以拖拽移动位置就很人性化；

---

一、如何在 elementUI el-dialog 对话框添加拖拽操作？

1. 首先我们将新建一个js文件 dialog.js 放在项目的对应位置，将下面代码复制到文件中；

/util/dialog.js

1. import Vue from 'vue'
2. // v-dialogDrag: 弹窗拖拽
3. Vue.directive('dialogDrag', {
4. bind(el, binding, vnode, oldVnode) {
5. const dialogHeaderEl = el.querySelector('.el-dialog__header');
6. const dragDom = el.querySelector('.el-dialog');
7. dialogHeaderEl.style.cursor = 'move';
8. // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
9. const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
10. dialogHeaderEl.onmousedown = (e) => {
11. // 鼠标按下，计算当前元素距离可视区的距离
12. const disX = e.clientX - dialogHeaderEl.offsetLeft;
13. const disY = e.clientY - dialogHeaderEl.offsetTop;
14. // 获取到的值带px 正则匹配替换
15. let styL, styT;
16. // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
17. if (sty.left.includes('%')) {
18. styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
19. styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
20. } else {
21. styL = +sty.left.replace(/\px/g, '');
22. styT = +sty.top.replace(/\px/g, '');
23. }
24. document.onmousemove = function (e) {
25. // 通过事件委托，计算移动的距离
26. const l = e.clientX - disX;
27. const t = e.clientY - disY;
28. // 移动当前元素
29. dragDom.style.left = `${ l + styL}px`;
30. dragDom.style.top = `${ t + styT}px`;
31. // 将此时的位置传出去
32. // binding.value({x:e.pageX,y:e.pageY})
33. }
34. document.onmouseup = function (e) {
35. document.onmousemove = null;
36. document.onmouseup = null;
37. }
38. }
39. }
40. })

---

2. 其次我们要在 main.js 文件中引入该 js 文件；

main.js

1. import Vue from 'vue';
2. import ElementUI from 'element-ui';
3. import 'element-ui/lib/theme-chalk/index.css';
5. import './util/dialog' // 引入可拖动的js
7. import App from './App.vue';
9. Vue.use(ElementUI);
11. new Vue({
12. el: '#app',
13. render: h => h(App)
14. });

---

3. 在其他 vue 文件中使用可拖动的 el-dialog ；

其他 vue 文件中使用 dialog 时配置 v-dialogDeag 就可以了

1. <el-dialog
2. :visible.sync="dialogVisible"
3. :append-to-body="true"
4. width="500px"
5. title="请选择"
6. :close-on-click-modal="false"
7. v-dialogDrag
8. >
9. </el-dialog>

二、效果展示

1.树表触摸对话框顶部时就会出现拖动的鼠标样式，按住鼠标就可以拖动对话框到窗口任意位置了