Monday, January 29, 2024
HomeiOS DevelopmentHome windows/Mac working fantastic however IOS/Android not working in any respect

Home windows/Mac working fantastic however IOS/Android not working in any respect


In my HTML I’ve the next code …

There are a number of photos however I’ll simply present one to maintain the code easy.

To make the picture draggable I’m utilizing the next js file …

// Drag and drop performance
const draggableElements = doc.querySelectorAll(‘.draggable’);
const container = doc.getElementById(‘draggable-container’);

draggableElements.forEach((draggableElement) => {
    let offsetX, offsetY, isDragging = false;

    draggableElement.addEventListener('mousedown', (occasion) => {
        occasion.preventDefault(); // Forestall default drag-and-drop conduct

        isDragging = true;

        offsetX = occasion.clientX - draggableElement.getBoundingClientRect().left;
        offsetY = occasion.clientY - draggableElement.getBoundingClientRect().high;

        doc.addEventListener('mousemove', handleDrag);
        doc.addEventListener('mouseup', () => {
            isDragging = false;
            doc.removeEventListener('mousemove', handleDrag);
        });
    });

    perform handleDrag(occasion) {
        if (!isDragging) return;

        const x = occasion.clientX - offsetX - container.getBoundingClientRect().left;
        const y = occasion.clientY - offsetY - container.getBoundingClientRect().high;

        const maxX = container.clientWidth - draggableElement.clientWidth;
        const maxY = container.clientHeight - draggableElement.clientHeight;

        // Make sure the picture stays inside the container
        const constrainedX = Math.min(Math.max(0, x), maxX);
        const constrainedY = Math.min(Math.max(0, y), maxY);

        draggableElement.fashion.left = `${constrainedX}px`;
        draggableElement.fashion.high = `${constrainedY}px`;
    }
});

This works completely on laptops and desktops in each Home windows and Mac for any browser.

Nonetheless it doesn’t work in any respect on cell units (telephones/tablets) both IOS or Android!

Can anybody see what’s incorrect?

Thanks.

On cell units nothing occurs in any respect. On laptops all is OK together with contact screens!!



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments