directives:{
drag:{
mounted: (el, binding) => {
const dragDom = el;
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
el.parentElement.style.cursor = 'move';
el.parentElement.onmousedown = (e) => {
// const disX = e.clientX - el.parentElement.offsetLeft;
// const disY = e.clientY - el.parentElement.offsetTop;
const disX = e.clientX;
const disY = e.clientY;
let styL, styT;
if(sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
}else {
styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, '');
};
document.onmousemove = function (e) {
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
const t = e.clientY - disY;
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
},
dragWidth:{
mounted: (el, binding) => {
const dragDom = el.parentElement;
el.style.cursor = 'se-resize';
let minW = binding.value.min.w;
let minH = binding.value.min.h;
let maxW = binding.value.max.w;
let maxH = binding.value.max.h;
el.onmousedown = (e) => {
e.stopPropagation()
e.preventDefault()
const mask = document.createElement('div')
mask.setAttribute('style', 'position:fixed;top:0px;bottom:0px;left:0px;right:0px;background:rgba(0,0,0,0)')
document.body.appendChild(mask)
// 计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft;
const disY = e.clientY - el.offsetTop;
document.body.onmousemove = function (e) {
e.preventDefault() // 移动时禁用默认事件
const l = e.clientX - disX;
const h = e.clientY - disY;
const wh = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log(l,h)
if(maxW>=l && minW<=l) dragDom.style.width = `${l}px`;
if(maxH>=h && minH<=h) dragDom.style.height = `${h}px`;
}
document.body.onmouseup = function (e) {
document.body.removeChild(mask)
document.body.onmousemove = null
document.body.onmouseup = null
}
}
}
}
},
标签：el,const,自定义,sty,binding,dragDom,vue3,document,拖拽 From： https://www.cnblogs.com/zgfs/p/17547166.html