Resumen del Problema y Solución para un Div Arrastrable en una Extensión de Chrome

Problema

Al intentar implementar un div arrastrable en una extensión de Chrome, se observa que el div (popup) se queda pegado al lado derecho de la pantalla hasta que alcanza el max-width. Esto dificulta el movimiento del popup a otras áreas de la pantalla.

Código Actual

El código utilizado está divido en JavaScript, CSS y HTML. El problema se manifiesta en el manejo del evento mousemove donde las coordenadas del popup no permiten que este se desplace más allá del borde derecho de la pantalla.

Corrección Propuesta

Para solucionar el problema de que el popup se quede atascado en el lado derecho, se debe verificar la posición del popup y asegurarse de que no exceda el ancho máximo permitido ni se desplace fuera de los límites de la pantalla al arrastrarlo. Así, se puede adicionar lógica para establecer condiciones que limiten la posición del div:

Modificación en el Código JavaScript:

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) {
        let newX = e.clientX - offsetX;
        let newY = e.clientY - offsetY;

        // Limitar el movimiento dentro de la ventana
        newX = Math.max(0, Math.min(window.innerWidth - popup.offsetWidth, newX));
        newY = Math.max(0, Math.min(window.innerHeight - popup.offsetHeight, newY));

        popup.style.left = `${newX}px`;
        popup.style.top = `${newY}px`;
    }
});

document.addEventListener("mouseup", (e) => {
    isDragging = false;
});

Explicación de las Modificaciones

• Límites de Movimiento: Se han añadido condiciones que utilizan Math.max() y Math.min() para restringir la posición del popup. Esto asegura que el popup no se desplace fuera de la ventana del navegador.
• Cálculo del Nuevo left y top: Se recalcula la posición utilizando el ancho y alto de la ventana, menos el ancho y alto del popup, respectivamente.

Conclusión

Con las modificaciones propuestas, el popup será arrastrable sin quedar pegado a un lado de la pantalla, permitiendo al usuario moverlo libremente dentro de los límites de la ventana del navegador. Esta solución garantiza una mejor experiencia al interactuar con el div arrastrable en la extensión de Chrome.