vue中elementui组件el-dialog拖拽（已处理边界情况）
全局注册
Vue.directive("elDialogDrag", (el) => {
const header = el.querySelector(".el-dialog__header");
const main = el.querySelector(".el-dialog");
header.style.cursor = "move";
header.onmousedown = (e) => {
// 上次鼠标弹起时X轴的偏移量
let l = +main.style.left.replace(/px/, "");
// 上次鼠标弹起时Y轴的偏移量
let t = +main.style.top.replace(/px/, "");
let x = e.pageX - l;
let y = e.pageY - t;
let markL = 0,
markT = 0,
markR = 0,
markB = 0,
offset = 10; // 偏移量
document.onmousemove = (e) => {
// 处理右边界
if (main.offsetLeft + main.offsetWidth + offset >= el.offsetWidth) {
markR === 0 && (markR = e.pageX - x);
e.pageX - x < markR && (main.style.left = e.pageX - x + "px");
} else if (main.offsetLeft > offset) {
main.style.left = e.pageX - x + "px";
} else {
// 处理左边界
markL === 0 && (markL = e.pageX - x);
e.pageX - x > markL && (main.style.left = e.pageX - x + "px");
}
// 处理下边界
if (main.offsetTop + main.offsetHeight + offset >= el.offsetHeight) {
markB === 0 && (markB = e.pageY - y);
e.pageY - y < markB && (main.style.top = e.pageY - y + "px");
} else if (main.offsetTop > offset) {
main.style.top = e.pageY - y + "px";
} else {
// 处理上边界
markT === 0 && (markT = e.pageY - y);
e.pageY - y > markT && (main.style.top = e.pageY - y + "px");
}
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
});
局部注册
directives: {
elDialogDrag: {
bind(el) {
const header = el.querySelector(".el-dialog__header");
const main = el.querySelector(".el-dialog");
header.style.cursor = "move";
header.onmousedown = (e) => {
// 上次鼠标按下时X轴的偏移量
let l = +main.style.left.replace(/px/, "");
// 上次鼠标按下时Y轴的偏移量
let t = +main.style.top.replace(/px/, "");
let x = e.pageX - l;
let y = e.pageY - t;
let markL = 0,
markT = 0,
markR = 0,
markB = 0,
offset = 10; // 偏移量
document.onmousemove = (e) => {
// 处理右边界
if (main.offsetLeft + main.offsetWidth + offset >= el.offsetWidth) {
markR === 0 && (markR = e.pageX - x);
e.pageX - x < markR && (main.style.left = e.pageX - x + "px");
} else if (main.offsetLeft > offset) {
main.style.left = e.pageX - x + "px";
} else {
// 处理左边界
markL === 0 && (markL = e.pageX - x);
e.pageX - x > markL && (main.style.left = e.pageX - x + "px");
}
// 处理下边界
if (
main.offsetTop + main.offsetHeight + offset >=
el.offsetHeight
) {
markB === 0 && (markB = e.pageY - y);
e.pageY - y < markB && (main.style.top = e.pageY - y + "px");
} else if (main.offsetTop > offset) {
main.style.top = e.pageY - y + "px";
} else {
// 处理上边界
markT === 0 && (markT = e.pageY - y);
e.pageY - y > markT && (main.style.top = e.pageY - y + "px");
}
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
},
},
引用
