const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");
let offsetX, offsetY, isDragging = false;
dragBtn.addEventListener("mousedown", (e) => {
isDragging = true;
offsetX = e.clientX - popup.offsetLeft;
offsetY = e.clientY - popup.offsetTop;
});
document.addEventListener("mousemove", (e) => {
if (isDragging) {
popup.style.left = `${e.clientX - offsetX}px`;
popup.style.top = `${e.clientY - offsetY}px`;
}
});
document.addEventListener("mouseup", (e) => {
isDragging = false;
});
#popup {
position: fixed;
top: 20px;
right: 20px;
min-width: 350px;
max-width: 500px;
background: var(--dark-bg, #222);
color: var(--dark-text, #fff);
border: 1px solid #333;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
padding: 15px;
border-radius: 8px;
z-index: 10000;
}
#popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
#popup-title {
font-size: 14px;
font-weight: bold;
}
button {
border: none;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
width: 26px;
height: 26px;
text-align: center;
padding: 0;
}
#drag-btn {
background: #326042;
color: white;
cursor: grab;
}
#theme-btn {
background: #ef713b;
color: white;
}
#close-btn {
background: #ff5252;
color: white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Song Lyrics Finder</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="popup">
<div id="popup-header">
<p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
<div style="display: flex; align-items: center; gap: 5px;">
<button id="drag-btn">✥</button>
<button id="theme-btn">◑</button>
<button id="close-btn">⮿</button>
</div>
</div>
</div>
</body>
</html>
由于该元素具有一个值，并且您要更改
right值，因此您正在伸展元素，直到达到最大尺寸为止。您可以更改
leftrightleftleft而不是正确设置。
，无论如何，我会使用变换更改位置：
const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");
let offsetX, offsetY, isDragging = false;
dragBtn.addEventListener("mousedown", (e) => {
isDragging = true;
offsetX = e.clientX;
offsetY = e.clientY;
});
document.addEventListener("mousemove", (e) => {
if (isDragging) {
popup.style.translate = `${e.clientX - offsetX}px ${e.clientY - offsetY}px`;
}
});
document.addEventListener("mouseup", (e) => {
isDragging = false;
});#popup {
position: fixed;
top: 20px;
right: 20px;
min-width: 350px;
max-width: 500px;
background: var(--dark-bg, #222);
color: var(--dark-text, #fff);
border: 1px solid #333;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
padding: 15px;
border-radius: 8px;
z-index: 10000;
}
#popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
#popup-title {
font-size: 14px;
font-weight: bold;
}
button {
border: none;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
width: 26px;
height: 26px;
text-align: center;
padding: 0;
}
#drag-btn {
background: #326042;
color: white;
cursor: grab;
}
#theme-btn {
background: #ef713b;
color: white;
}
#close-btn {
background: #ff5252;
color: white;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Song Lyrics Finder</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="popup">
<div id="popup-header">
<p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
<div style="display: flex; align-items: center; gap: 5px;">
<button id="drag-btn">✥</button>
<button id="theme-btn">◑</button>
<button id="close-btn">⮿</button>
</div>
</div>
</div>
</body>
</html>