Chrome扩展可拖动Popup异常：拖动时贴右侧直至达到max-width

你的弹窗拖动时卡在右侧的核心原因是初始CSS同时设置了right: 20px和拖动时动态设置left属性。对于position: fixed的元素，当同时存在left和right时，浏览器会自动拉伸/压缩元素宽度来满足这两个定位约束，这就导致拖动过程中弹窗宽度被挤压，直到达到max-width的限制后，才会正常跟随鼠标移动。

修复步骤 #

• 统一定位属性：移除初始CSS中的right: 20px，改用left设置初始位置；或者保留初始right，但在拖动开始时清除该属性，避免左右定位冲突。
• 确保偏移计算准确：基于弹窗当前实际位置计算拖动偏移量，避免定位逻辑混乱。

修改后的CSS（改用left设置初始位置）

#popup {
    position: fixed;
    top: 20px;
    /* 用left实现原right:20px的效果，基于min-width计算 */
    left: calc(100vw - 350px - 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;
}

修改后的JS（保留初始right，拖动时清除）

const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");

let offsetX, offsetY, isDragging = false;

dragBtn.addEventListener("mousedown", (e) => {
    isDragging = true;
    // 拖动开始时清除right属性，避免和left冲突
    popup.style.right = 'auto';
    // 基于当前left位置重新计算偏移量
    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;
});

如果希望拖动结束后弹窗自动回到右侧，可在mouseup事件中重新设置right并清除left，但通常保持拖动后的left/top定位更符合用户操作预期。

内容的提问来源于stack exchange，提问作者Milos Stojanovic