前言：
最近有个项目，客户要求弹窗可拖动，但是由于elemen ui本身的弹窗并没有拖动的属性，无法满足客户的需求。
于是我百度找到了几篇文章，终于可以实现客户的需求！
请往下看↓↓
一、新建一个目录：utils
二、创建drag .js文件
/**
* 拖拽移动
* @param {elementObjct} bar 鼠标点击控制拖拽的元素
* @param {elementObjct} target 移动的元素
* @param {function} callback 移动后的回调
*/
export function startDrag(bar, target, callback) {
var params = {
top: 0,
left: 0,
currentX: 0,
currentY: 0,
flag: false,
cWidth: 0,
cHeight: 0,
tWidth: 0,
tHeight: 0
};
// 给拖动块添加样式
bar.style.cursor = 'move';
// 获取相关CSS属性
// o是移动对象
// var getCss = function (o, key) {
// return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
// };
bar.onmousedown = function (event) {
// 按下时初始化params
var e = event ? event : window.event;
params = {
top: target.offsetTop,
left: target.offsetLeft,
currentX: e.clientX,
currentY: e.clientY,
flag: true,
cWidth: document.body.clientWidth,
cHeight: document.body.clientHeight,
tWidth: target.offsetWidth,
tHeight: target.offsetHeight
};
// 给被拖动块初始化样式
target.style.margin = 0;
target.style.top = params.top + 'px';
target.style.left = params.left + 'px';
if (!event) {
// 防止IE文字选中
bar.onselectstart = function () {
return false;
}
}
document.onmousemove = function (event) {
// 防止文字选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var e = event ? event : window.event;
if (params.flag) {
var nowX = e.clientX;
var nowY = e.clientY;
// 差异距离
var disX = nowX - params.currentX;
var disY = nowY - params.currentY;
// 最终移动位置
var zLeft = 0;
var zTop = 0;
zLeft = parseInt(params.left) + disX;
// 限制X轴范围
if (zLeft <= -parseInt(params.tWidth / 2)) {
zLeft = -parseInt(params.tWidth / 2);
}
if (zLeft >= params.cWidth - parseInt(params.tWidth * 0.5)) {
zLeft = params.cWidth - parseInt(params.tWidth * 0.5);
}
zTop = parseInt(params.top) + disY;
// 限制Y轴范围
if (zTop <= 0) {
zTop = 0;
}
if (zTop >= params.cHeight - parseInt(params.tHeight * 0.5)) {
zTop = params.cHeight - parseInt(params.tHeight * 0.5);
}
// 执行移动
target.style.left = zLeft + 'px';
target.style.top = zTop + 'px';
}
if (typeof callback == "function") {
callback(zLeft, zTop);
}
}
document.onmouseup = function () {
params.flag = false;
document.onmousemove = null;
document.onmouseup = null;
};
};
}三、创建directive.js 文件
// 引入拖拽js
import { startDrag } from './drag.js'
/**
* 为el-dialog弹框增加拖拽功能
* @param {*} el 指定dom
* @param {*} binding 绑定对象
* desc 只要用到了el-dialog的组件，都可以通过增加v-draggable属性变为可拖拽的弹框
*/
const draggable = (el, binding) => {
// 绑定拖拽事件 [绑定拖拽触发元素为弹框头部、拖拽移动元素为整个弹框]
startDrag(el.querySelector('.el-dialog__header'), el.querySelector('.el-dialog'), binding.value);
};
const directives = {
draggable,
};
// 这种写法可以批量注册指令
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key]);
});
},
};四、main.js文件中全局引入vue指令
全局注册
import directive from './utils/directive'
Vue.use(directive)五、使用v-draagble
在页面上使用v-draagble
好了，经过以上的几步，已经可以实现拖动功能了！
如果有不同看法，欢迎留言交流，谢谢！！
下面是一个博主的文章，大家不懂也可以参考一下文章来源：https://www.toymoban.com/news/detail-786620.html
参考链接https://www.jb51.net/article/234469.htm文章来源地址https://www.toymoban.com/news/detail-786620.html
到了这里，关于vue/Element UI 实现Element UI el-dialog 自由拖动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
