xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大数据内页面取消拖拽

Browse Source
This commit is contained in:
home孙 2025-06-07 16:34:18 +08:00
parent 407f13d790
commit 37588ffb5e
1 changed files with 21 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

690
src/views/page/largeScreen1.vue
View File

@ -1380,678 +1380,30 @@ export default {
},
drag_boxHandler(id) {
console.log(id,111);
let demo = this.$refs[`drag_box${id}`];
demo = document.querySelector(`.drag_box${id}`); //待拖拽元素
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; //关闭拖拽状态
};
let scale = 1; // 初始缩放比例
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_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);
}
};
},
},
// 只保留滚轮缩放功能
demo.onwheel = function(e) {
e.preventDefault(); // 阻止默认滚动行为
if (e.deltaY < 0) { // 向上滚动，放大
scale += 0.05;
if (scale > 4) {
scale = 4; // 最大放大4倍
}
} else { // 向下滚动，缩小
scale -= 0.05;
if (scale < 0.5) {
scale = 0.5; // 最小缩小到0.5倍
}
}
demo.style.transform = `scale(${scale})`;
}
}
}
};
</script>
<style lang="scss" scoped>