拖动和缩放的效果怎么做？
有两个div
<div class="one" style="width:300px;height:300px;"> <div class="two" style="width:1000px;height:500px;"></div>
</div>
想要实现.two在.one这个div里面通过滚轮缩放和鼠标拖动效果，并且拖动过程中不能完全拖离.one这个的区域，至少保留20px还在区域内(不管上下左右拖动都一样)意思大概跟下面这张图一样
而且.two初始的宽高大于.one，在打开这个页面的时候要把.two缩放到.one可显示全的大小，不知道这个效果该怎么做，搞了好久搞不出来，现在做了一部分，代码如下：
<template> <div class='layoutView' ref="canvasRef">
<div ref="divRef" class="draggable"></div>
</div>
</template>
<script>
export default {
props:[],
data() {
return {
screenNum:1,//缩放倍数
}
},
created(){
},
mounted(){
// 获取canvas和div元素的引用
const canvas = this.$refs.canvasRef;
const div = this.$refs.divRef;
// 调用拖动函数，传入div元素和canvas元素的引用
this.draggable(div, canvas);
// 调用缩放函数，传入div元素和canvas元素的引用
this.zoomable(div, canvas);
},
methods:{
//拖动
draggable(element, canvas) {
// 鼠标按下时的初始位置
let initialX = 0;
let initialY = 0;
// 鼠标按下时，计算初始位置和设置鼠标移动事件
element.addEventListener('mousedown', (e) => {
initialX = e.clientX - element.offsetLeft;
initialY = e.clientY - element.offsetTop;
document.addEventListener('mousemove', moveElement);
});
// 鼠标松开时，移除鼠标移动事件
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', moveElement);
});
// 鼠标移动时，计算元素的新位置并设置
function moveElement(e) {
const newX = e.clientX - initialX;
const newY = e.clientY - initialY;
element.style.left = newX + 'px';
element.style.top = newY + 'px';
}
},
//滚轮缩放
zoomable(element, canvas) {
let that = this
element.addEventListener('wheel', function(event) {
// 阻止默认的滚轮事件，以防止整个页面滚动
event.preventDefault();
// 获取鼠标滚轮的变化值
var delta = event.deltaY || event.detail || event.wheelDelta;
// 获取鼠标相对于div元素的位置
var mouseX = event.clientX - element.offsetLeft;
var mouseY = event.clientY - element.offsetTop;
// 根据鼠标位置以及滚轮变化值进行放大缩小操作
if (delta < 0) {
that.screenNum+=0.1
// 放大div元素
element.style.transform = `scale(${that.screenNum})`;
} else {
//不能无限缩小
if(that.screenNum <=0.4) return
that.screenNum-=0.1
// 缩小div元素
element.style.transform = `scale(${that.screenNum})`;
}
// 获取canvas的宽度和高度
// const canvasWidth = canvas.width;
// const canvasHeight = canvas.height;
// // 获取div元素的宽度和高度
// const divWidth = element.offsetWidth;
// const divHeight = element.offsetHeight;
// // 计算div元素放大后的宽度和高度
// const scaledDivWidth = divWidth * that.screenNum;
// const scaledDivHeight = divHeight * that.screenNum;
// // 计算div元素在canvas中心的位置
// const x = (canvasWidth - scaledDivWidth) / 2;
// const y = (canvasHeight - scaledDivHeight) / 2;
// // 设置div元素在canvas中心的位置
// element.style.left = `${x}px`;
// element.style.top = `${y}px`;
});
},
}
}
</script>
<style lang='scss'>
.layoutView{
position:relative;
overflow: hidden;
width:500px;
height: 500px;
border: 1px solid #000;
.draggable {
cursor: move;
z-index: 1;
position: absolute;
background-color: red;
width: 1024px;
height: 768px;
}
}
</style>
回答：
这种吗?
<!DOCTYPE html><html>
<head>
<style>
.one {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
background-color: aquamarine;
}
.two {
width: 1000px;
height: 500px;
position: absolute;
cursor: grab;
background: #000;
}
</style>
</head>
<body>
<div class="one" id="container">
<div class="two" id="content"></div>
</div>
<script>
var container = document.getElementById('container');
var content = document.getElementById('content');
var initialWidth = 1000;
var initialHeight = 500;
var minLeft = 20;
var minTop = 20;
content.style.width = initialWidth + 'px';
content.style.height = initialHeight + 'px';
var isDragging = false;
var lastX = 0;
var lastY = 0;
content.addEventListener('mousedown', function (e) {
isDragging = true;
lastX = e.clientX;
lastY = e.clientY;
content.style.cursor = 'grabbing';
e.preventDefault();
});
document.addEventListener('mousemove', function (e) {
if (!isDragging) return;
var deltaX = e.clientX - lastX;
var deltaY = e.clientY - lastY;
var newLeft = content.offsetLeft + deltaX;
var newTop = content.offsetTop + deltaY;
newLeft = Math.max(minLeft, newLeft);
newLeft = Math.min(container.clientWidth - minLeft, newLeft);
newTop = Math.max(minTop, newTop);
newTop = Math.min(container.clientHeight - minTop, newTop);
content.style.left = newLeft + 'px';
content.style.top = newTop + 'px';
lastX = e.clientX;
lastY = e.clientY;
});
document.addEventListener('mouseup', function () {
isDragging = false;
content.style.cursor = 'grab';
});
container.addEventListener('wheel', function (e) {
var scaleFactor = 1.2;
var newWidth = content.clientWidth * (e.deltaY > 0 ? 1 / scaleFactor : scaleFactor);
var newHeight = content.clientHeight * (e.deltaY > 0 ? 1 / scaleFactor : scaleFactor);
newWidth = Math.min(container.clientWidth, newWidth);
newHeight = Math.min(container.clientHeight, newHeight);
content.style.width = newWidth + 'px';
content.style.height = newHeight + 'px';
e.preventDefault();
});
</script>
</body>
</html>
回答：
希望这个能帮到你https://blog.csdn.net/weixin_43960320/article/details/1307186...
以上是 拖动和缩放的效果怎么做？ 的全部内容， 来源链接： utcz.com/p/934819.html
