vue 设置div悬浮并拖拉不超出当前可视屏幕
//自定义指令directives: {drag: {// 指令的定义bind: function(el) {let oDiv = el;// 获取当前元素oDiv.onmousedown = (e) => {// 算出鼠标相对元素的位置let disX = e.clientX - oDiv.offsetLeft
·
//自定义指令
directives: {
drag: {
// 指令的定义
bind: function(el) {
let oDiv = el; // 获取当前元素
oDiv.onmousedown = (e) => {
// 算出鼠标相对元素的位置
let disX = e.clientX - oDiv.offsetLeft;
let disY = e.clientY - oDiv.offsetTop;
console.log("本身的宽高",oDiv.clientHeight);
document.onmousemove = (e) => {
// 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
if (left <= 0) {
left = 0;
} else if (left >= document.documentElement.clientWidth - oDiv.clientWidth){
//document.documentElement.clientWidth 屏幕的可视宽度
left = document.documentElement.clientWidth - oDiv.clientWidth
}
if (top <= 0) {
top = 0;
} else if (top >= document.documentElement.clientHeight - oDiv.clientHeight){
// document.documentElement.clientHeight 屏幕的可视高度
top = document.documentElement.clientHeight - oDiv.clientHeight
}
oDiv.style.left = left + 'px';
oDiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
}
},
<div v-drag ></div>//使用v-drag
更多推荐
已为社区贡献3条内容
所有评论(0)