话不多说直接上代码!!!!
使用此自定义指令需要给弹窗的头部元素添加drag,class名,指明拖动那个元素会进行动态计算位置,*0.5是为了避免弹窗拖出可视区域。
import Vue from 'vue'
// v-dialogDrag: 弹窗拖拽
Vue.directive('drag', {
bind: function (el,binding, vnode, oldVnode) {
//使用此自定义指令需要给弹窗的头部元素添加drag,class名
let oDiv = el.querySelector('.drag'); // 获取当前元素
oDiv.style.cursor = 'move';
oDiv.onmousedown = (e) => {
// 算出鼠标相对元素的位置
let disX = e.clientX - el.offsetLeft;
let disY = e.clientY - el.offsetTop;
console.log("本身的宽高", el.clientHeight, el.clientWidth);
document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
if (left <= 0) {
left = 0;
} else if (
left >=
document.documentElement.clientWidth -
el.clientWidth +
el.clientWidth*0.5
) {
left =
document.documentElement.clientWidth -
el.clientWidth +
el.clientWidth*0.5;
}
if (top <= 0) {
top = 0;
} else if (
top >=
document.documentElement.clientHeight -
el.clientHeight +
el.clientHeight*0.5
) {
top =
document.documentElement.clientHeight -
el.clientHeight +
el.clientHeight*0.5;
}
el.style.left = left + "px";
el.style.top = top + "px";
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
})
在main.js中引入
import './utils/drag'
给对应想要拖动的元素添加v-drsg就可以了
使用此自定义指令需要给弹窗的头部元素添加drag,class名,