iOS Development

javascript – Draggable picture working high-quality on Home windows/macOS however not working in any respect on iOS/Android

Spread the love

In my HTML I’ve the next code:

<div class="anagram" id="draggable-container">
    <img width="50px" class="draggable" src="photographs/A.png" alt="Letter A on a Scrabble tile." fashion="rotate: 20deg;">

There are a number of photographs 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().prime;

        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().prime;

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

        // Make sure the picture stays throughout the container
        const constrainedX = Math.min(Math.max(0, x), maxX);
        const constrainedY = Math.min(Math.max(0, y), maxY); = `${constrainedX}px`; = `${constrainedY}px`;

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

Nonetheless it doesn’t work in any respect on cellular gadgets (telephones/tablets) both iOS or Android!

Can anybody see what’s fallacious?

On cellular gadgets 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 *