<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可拖动的固定图片</title>
<style>
/* 样式部分都是全自动的，不用修改 */
body {
margin: 0;
padding: 0;
height: 300vh;
overflow: auto;
position: relative;
touch-action: none;
}
.draggable-image {
position: fixed;
bottom: 20px;
left: 20px;
width: 131.8px;
height: auto;
cursor: pointer;
user-select: none;
transition: transform 0.1s ease;
z-index: 1000;
}
</style>
</head>
<body>
<img src="./assets/keai.gif" alt="Draggable Image" class="draggable-image" id="draggableImage">
<script>
const image = document.getElementById('draggableImage');
let isDragging = false;
let offsetX, offsetY;
image.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - image.getBoundingClientRect().left;
offsetY = e.clientY - image.getBoundingClientRect().top;
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
image.style.left = `${e.clientX - offsetX}px`;
image.style.top = `${e.clientY - offsetY}px`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
image.addEventListener('touchstart', (e) => {
isDragging = true;
offsetX = e.touches[0].clientX - image.getBoundingClientRect().left;
offsetY = e.touches[0].clientY - image.getBoundingClientRect().top;
e.preventDefault();
});
document.addEventListener('touchmove', (e) => {
if (isDragging) {
image.style.left = `${e.touches[0].clientX - offsetX}px`;
image.style.top = `${e.touches[0].clientY - offsetY}px`;
}
e.preventDefault();
});
document.addEventListener('touchend', () => {
isDragging = false;
});
</script>
</body>
</html>
index.html
assets