大数据内页面取消拖拽
This commit is contained in:
parent
407f13d790
commit
37588ffb5e
@ -1380,678 +1380,30 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
drag_boxHandler(id) {
|
drag_boxHandler(id) {
|
||||||
console.log(id,111);
|
|
||||||
let demo = this.$refs[`drag_box${id}`];
|
let demo = this.$refs[`drag_box${id}`];
|
||||||
demo = document.querySelector(`.drag_box${id}`); //待拖拽元素
|
demo = document.querySelector(`.drag_box${id}`); //待拖拽元素
|
||||||
let canMove = false; //拖拽状态
|
let scale = 1; // 初始缩放比例
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
// 只保留滚轮缩放功能
|
||||||
//窗口失去焦点事件
|
demo.onwheel = function(e) {
|
||||||
canMove = false; //关闭拖拽状态
|
e.preventDefault(); // 阻止默认滚动行为
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
if (e.deltaY < 0) { // 向上滚动，放大
|
||||||
window.onmousemove = function (e) {
|
scale += 0.05;
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
if (scale > 4) {
|
||||||
if (canMove) {
|
scale = 4; // 最大放大4倍
|
||||||
//对范围判断
|
}
|
||||||
let left = e.pageX - x;
|
} else { // 向下滚动，缩小
|
||||||
let top = e.pageY - y;
|
scale -= 0.05;
|
||||||
|
if (scale < 0.5) {
|
||||||
|
scale = 0.5; // 最小缩小到0.5倍
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
demo.style.transform = `scale(${scale})`;
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
}
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
}
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
}
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
drag_boxHandler1() {
|
|
||||||
let demo = this.$refs.drag_box2;
|
|
||||||
demo = document.querySelector(".drag_box2"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler13() {
|
|
||||||
let demo = this.$refs.drag_box13;
|
|
||||||
demo = document.querySelector(".drag_box13"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler12() {
|
|
||||||
let demo = this.$refs.drag_box12;
|
|
||||||
demo = document.querySelector(".drag_box12"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler11() {
|
|
||||||
let demo = this.$refs.drag_box11;
|
|
||||||
demo = document.querySelector(".drag_box11"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler10() {
|
|
||||||
let demo = this.$refs.drag_box10;
|
|
||||||
demo = document.querySelector(".drag_box10"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler9() {
|
|
||||||
let demo = this.$refs.drag_box9;
|
|
||||||
demo = document.querySelector(".drag_box9"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler8() {
|
|
||||||
let demo = this.$refs.drag_box8;
|
|
||||||
demo = document.querySelector(".drag_box8"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler7() {
|
|
||||||
let demo = this.$refs.drag_box7;
|
|
||||||
demo = document.querySelector(".drag_box7"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
drag_boxHandler5() {
|
|
||||||
let demo = this.$refs.drag_box5;
|
|
||||||
demo = document.querySelector(".drag_box5"); //待拖拽元素
|
|
||||||
let canMove = false; //拖拽状态
|
|
||||||
let x = 0,
|
|
||||||
y = 0; //鼠标位置
|
|
||||||
//监听按下鼠标事件
|
|
||||||
demo.onmousedown = function (e) {
|
|
||||||
x = e.pageX - demo.offsetLeft;
|
|
||||||
y = e.pageY - demo.offsetTop;
|
|
||||||
canMove = true; //激活拖拽状态
|
|
||||||
};
|
|
||||||
//监听右击鼠标事件
|
|
||||||
demo.oncontextmenu = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为
|
|
||||||
};
|
|
||||||
//监听鼠标抬起事件
|
|
||||||
window.onmouseup = function () {
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onblur = function () {
|
|
||||||
//窗口失去焦点事件
|
|
||||||
canMove = false; //关闭拖拽状态
|
|
||||||
};
|
|
||||||
|
|
||||||
//监听鼠标移动事件
|
|
||||||
window.onmousemove = function (e) {
|
|
||||||
e.preventDefault(); //阻止默认行为(字不能拖走)
|
|
||||||
if (canMove) {
|
|
||||||
//对范围判断
|
|
||||||
let left = e.pageX - x;
|
|
||||||
let top = e.pageY - y;
|
|
||||||
|
|
||||||
//if (left > 0) left = 0 //当距离左边小于0时 让它为0
|
|
||||||
//if (top > 0) top = 0 //当距离上边小于0时 让它为0
|
|
||||||
// //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
|
|
||||||
// let maxLeft = window.innerWidth - demo.offsetWidth
|
|
||||||
// //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
|
|
||||||
// let maxTop = window.innerHeight - demo.offsetHeight
|
|
||||||
|
|
||||||
// if (left > maxLeft) left = maxLeft
|
|
||||||
// if (top > maxTop) top = maxTop
|
|
||||||
|
|
||||||
demo.style.left = left + "px";
|
|
||||||
demo.style.top = top + "px";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let scale = 1;
|
|
||||||
demo.onwheel = function (e) {
|
|
||||||
if (e.wheelDelta > 0) {
|
|
||||||
scale += 0.05;
|
|
||||||
if (scale > 4) {
|
|
||||||
scale = 4;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
} else {
|
|
||||||
scale -= 0.05;
|
|
||||||
if (scale < 1) {
|
|
||||||
scale = 1;
|
|
||||||
}
|
|
||||||
demo.style.transform = `scale(${scale})`;
|
|
||||||
// console.log(scale);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user