iOS Development

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

Spread the love

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 habits

        isDragging = true;

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

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

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

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

        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.type.left = `${constrainedX}px`; = `${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?


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

Leave a Reply

Your email address will not be published. Required fields are marked *