拖拽图片桌面端正常，移动端（iOS/Android）完全失效求助

问题背景 #

使用以下HTML结构实现可拖拽的字母卡片：

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

（实际包含多张图片，此处简化展示）

配套JS实现拖拽逻辑：

// Drag and drop functionality
const draggableElements = document.querySelectorAll('.draggable');
const container = document.getElementById('draggable-container');

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

    draggableElement.addEventListener('mousedown', (event) => {
        event.preventDefault(); // Prevent default drag-and-drop behavior

        isDragging = true;

        offsetX = event.clientX - draggableElement.getBoundingClientRect().left;
        offsetY = event.clientY - draggableElement.getBoundingClientRect().top;

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

    function handleDrag(event) {
        if (!isDragging) return;

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

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

        // Ensure the image stays within the container
        const constrainedX = Math.min(Math.max(0, x), maxX);
        const constrainedY = Math.min(Math.max(0, y), maxY);

        draggableElement.style.left = `${constrainedX}px`;
        draggableElement.style.top = `${constrainedY}px`;
    }
});

该代码在Windows/macOS桌面端浏览器（含触摸屏桌面设备）完全正常，但在iOS/Android移动设备上无任何响应。

问题原因 #

• 移动端浏览器不触发mousedown/mousemove/mouseup这类鼠标事件，而是使用touchstart/touchmove/touchend专属触摸事件
• 触摸事件的坐标信息存储在event.touches[0]对象中，无法直接通过event.clientX/event.clientY获取

修复方案 #

同时监听鼠标事件和触摸事件，封装坐标获取逻辑兼容两种事件类型，并在触摸移动时阻止默认行为避免页面滚动干扰。

修改后的完整JS代码：

// Drag and drop functionality - 兼容桌面端与移动端
const draggableElements = document.querySelectorAll('.draggable');
const container = document.getElementById('draggable-container');

// 封装获取触摸/鼠标事件坐标的工具函数
function getEventCoords(event) {
    // 处理触摸事件
    if (event.type.startsWith('touch')) {
        return {
            clientX: event.touches[0].clientX,
            clientY: event.touches[0].clientY
        };
    }
    // 处理鼠标事件
    return {
        clientX: event.clientX,
        clientY: event.clientY
    };
}

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

    // 统一处理拖拽开始逻辑
    function startDrag(event) {
        event.preventDefault();
        isDragging = true;
        
        const coords = getEventCoords(event);
        offsetX = coords.clientX - draggableElement.getBoundingClientRect().left;
        offsetY = coords.clientY - draggableElement.getBoundingClientRect().top;

        // 添加移动和结束监听
        document.addEventListener('mousemove', handleDrag);
        document.addEventListener('touchmove', handleDrag);
        document.addEventListener('mouseup', endDrag);
        document.addEventListener('touchend', endDrag);
    }

    // 统一处理拖拽结束逻辑
    function endDrag() {
        isDragging = false;
        // 移除监听
        document.removeEventListener('mousemove', handleDrag);
        document.removeEventListener('touchmove', handleDrag);
        document.removeEventListener('mouseup', endDrag);
        document.removeEventListener('touchend', endDrag);
    }

    // 统一处理拖拽移动逻辑
    function handleDrag(event) {
        if (!isDragging) return;
        event.preventDefault(); // 阻止移动端默认滚动行为
        
        const coords = getEventCoords(event);
        const x = coords.clientX - offsetX - container.getBoundingClientRect().left;
        const y = coords.clientY - offsetY - container.getBoundingClientRect().top;

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

        // 限制拖拽范围在容器内
        const constrainedX = Math.min(Math.max(0, x), maxX);
        const constrainedY = Math.min(Math.max(0, y), maxY);

        draggableElement.style.left = `${constrainedX}px`;
        draggableElement.style.top = `${constrainedY}px`;
    }

    // 绑定开始事件
    draggableElement.addEventListener('mousedown', startDrag);
    draggableElement.addEventListener('touchstart', startDrag);
});

关键修改点 #

1. 事件监听兼容：同时绑定mousedown/touchstart、mousemove/touchmove、mouseup/touchend事件，覆盖桌面与移动场景
2. 坐标获取兼容：通过工具函数getEventCoords统一提取鼠标/触摸事件的坐标，避免重复逻辑
3. 移动端行为处理：在touchmove时调用event.preventDefault()，阻止页面滚动或缩放干扰拖拽操作
4. 代码模块化：将开始、结束、移动逻辑拆分为独立函数，提升可读性和维护性

内容的提问来源于stack exchange，提问作者onecatnomice