我正在制作一个地图网站，例如谷歌地图。我找到了一种拖动图像（div）移动的方法。但我不希望它超出屏幕范围。一旦超过，白色背景就会出现。我想为图像设置限制，这样当图像的边缘碰到窗口边缘时，它就不能移动。我想要的不是将图像保留在容器内，因为图像比窗口大，并且它的工作原理是移动图像。
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div class="container">
<div class="draggable" id="dragMe">
<img src="Texture/test map.png">
</div>
</div>
</body>
CSS
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100vw;
overflow-x: hidden;
overflow-y: hidden;
}
img {
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
border: 1px solid #cbd5e0;
}
.draggable {
cursor: pointer;
position: absolute;
user-select: none;
align-items: center;
display: flex;
justify-content: center;
border: 1px solid #cbd5e0;
}
javascript
document.addEventListener('DOMContentLoaded', function () {
let x = 0;
let y = 0;
const ele = document.getElementById('dragMe');
const mouseDownHandler = function (e) {
x = e.clientX;
y = e.clientY;
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
};
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
const dy = e.clientY - y;
ele.style.top = `${ele.offsetTop + dy}px`;
ele.style.left = `${ele.offsetLeft + dx}px`;
x = e.clientX;
y = e.clientY;
};
const mouseUpHandler = function () {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
ele.addEventListener('mousedown', mouseDownHandler);
});
基本上，您将根据鼠标移动计算新的顶部和左侧值，但您将施加一些约束。 window.innerWidth 和 window.innerHeight 提供屏幕尺寸，而 ele.offsetWidth 和 ele.offsetHeight 告诉您图像有多大。使用这些来设置边界，使图像不再拖沓。
const mouseMoveHandler = function (e) {
const dx = e.clientX - x;
const dy = e.clientY - y;
// Calculate the new position
let newLeft = ele.offsetLeft + dx;
let newTop = ele.offsetTop + dy;
// Get the dimensions of the window and the image
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
const imageWidth = ele.offsetWidth;
const imageHeight = ele.offsetHeight;
// Define the boundaries
const leftBoundary = screenWidth - imageWidth;
const topBoundary = screenHeight - imageHeight;
// Constrain the new position
newLeft = Math.min(Math.max(newLeft, leftBoundary), 0);
newTop = Math.min(Math.max(newTop, topBoundary), 0);
// Update the position of the element
ele.style.left = `${newLeft}px`;
ele.style.top = `${newTop}px`;
// Update the starting point for the next movement
x = e.clientX;
y = e.clientY;
};