Drag And Drop Image Contenter

function processImage(originalImg, containerWidth = "100%", containerHeight = "500px") {
    // Create the container element
    const container = document.createElement('div');
    container.style.width = containerWidth;
    container.style.height = containerHeight;
    container.style.position = 'relative';
    container.style.overflow = 'hidden';
    container.style.border = '2px dashed #aaa';
    container.style.backgroundColor = '#eef2f3';
    container.style.borderRadius = '8px';
    container.style.userSelect = 'none';
    container.style.touchAction = 'none'; // Prevents native scrolling on mobile during interaction
    container.style.transition = 'background-color 0.2s';
    
    // Instructions for user
    const textLayer = document.createElement('div');
    textLayer.style.position = 'absolute';
    textLayer.style.top = '10px';
    textLayer.style.left = '10px';
    textLayer.style.fontFamily = 'sans-serif';
    textLayer.style.fontSize = '12px';
    textLayer.style.color = '#555';
    textLayer.style.pointerEvents = 'none';
    textLayer.style.zIndex = '1';
    textLayer.innerText = 'Drag image to pan, or drop a new image file here.';
    container.appendChild(textLayer);

    // Create the interactable image element
    const img = document.createElement('img');
    img.src = originalImg.src;
    img.style.position = 'absolute';
    img.style.cursor = 'grab';
    img.style.left = '50px';
    img.style.top = '50px';
    img.style.zIndex = '2';
    img.style.maxWidth = 'none'; // Prevent external stylesheets from capping the width
    img.ondragstart = () => false; // Disable default browser image drag

    container.appendChild(img);

    // --- Panning Logic (Move Image around container) ---
    let isDragging = false;
    let startX = 0, startY = 0, initialLeft = 0, initialTop = 0;

    const dragStart = (e) => {
        if (e.type === 'touchstart') {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        } else {
            startX = e.clientX;
            startY = e.clientY;
        }
        initialLeft = parseInt(img.style.left || 0, 10);
        initialTop = parseInt(img.style.top || 0, 10);
        isDragging = true;
        img.style.cursor = 'grabbing';
    };

    const dragMove = (e) => {
        if (!isDragging) return;
        e.preventDefault(); // Prevent standard scroll
        let clientX, clientY;
        if (e.type === 'touchmove') {
            clientX = e.touches[0].clientX;
            clientY = e.touches[0].clientY;
        } else {
            clientX = e.clientX;
            clientY = e.clientY;
        }
        const dx = clientX - startX;
        const dy = clientY - startY;
        img.style.left = `${initialLeft + dx}px`;
        img.style.top = `${initialTop + dy}px`;
    };

    const dragEnd = () => {
        isDragging = false;
        img.style.cursor = 'grab';
    };

    // Attach panning event listeners
    img.addEventListener('mousedown', dragStart);
    img.addEventListener('touchstart', dragStart, { passive: false });

    container.addEventListener('mousemove', dragMove, { passive: false });
    container.addEventListener('touchmove', dragMove, { passive: false });

    container.addEventListener('mouseup', dragEnd);
    container.addEventListener('touchend', dragEnd);
    container.addEventListener('mouseleave', dragEnd);
    container.addEventListener('touchcancel', dragEnd);

    // --- Drag and Drop Logic (Replace Image) ---
    container.addEventListener('dragover', (e) => {
        e.preventDefault();
        container.style.backgroundColor = '#d1e8ff';
    });

    container.addEventListener('dragleave', (e) => {
        e.preventDefault();
        container.style.backgroundColor = '#eef2f3';
    });

    container.addEventListener('drop', (e) => {
        e.preventDefault();
        container.style.backgroundColor = '#eef2f3';
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            const file = e.dataTransfer.files[0];
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    img.src = event.target.result;
                    img.style.left = '50px';
                    img.style.top = '50px';
                };
                reader.readAsDataURL(file);
            }
        }
    });

    // Return the functional UI container
    return container;
}