HTML元素拖拽JS模块Android端失效问题求助

问题根源 #

1. 代码冗余错误：你重复定义了handleDragStart和handleDragEnd函数，虽不影响现有功能，但属于不必要的代码冗余，建议清理。
2. API兼容性问题：原生HTML5的drag系列事件在Android移动端浏览器支持度极低，多数Android浏览器不会触发这些事件，这是功能完全失效的核心原因——移动端需结合touch事件实现拖拽逻辑。

修复后的代码 #

import * as devices from "./devices.js"

var items = [];
var dragSrcEl = null;
// 触摸相关变量
var touchStartX = 0;
var touchStartY = 0;
var isDragging = false;
var dragThreshold = 10; // 拖动阈值，避免误触
var longPressTimer = null;
var longPressDelay = 500; // 长按触发拖拽的延迟时间

var init = function(){
    items = document.querySelectorAll('.expander');
    items.forEach(function (item) {
        removeListeners(item);
        addListeners(item);
        // 给元素添加draggable属性（桌面端需要）
        item.setAttribute('draggable', true);
    });
}

var removeListeners = function (item) {
    // 移除drag事件监听
    item.removeEventListener('dragstart',   handleDragStart);
    item.removeEventListener('dragend',     handleDragEnd);
    item.removeEventListener('dragover',    handleDragOver);
    item.removeEventListener('dragenter',   handleDragEnter);
    item.removeEventListener('dragleave',   handleDragLeave);
    item.removeEventListener('drop',        handleDrop);
    // 移除touch事件监听
    item.removeEventListener('touchstart',  handleTouchStart);
    item.removeEventListener('touchmove',   handleTouchMove);
    item.removeEventListener('touchend',    handleTouchEnd);
    item.removeEventListener('touchcancel', handleTouchCancel);
}

var addListeners = function (item) {
    // 添加drag事件监听（兼容桌面、iOS）
    item.addEventListener('dragstart',  handleDragStart);
    item.addEventListener('dragend',    handleDragEnd);
    item.addEventListener('dragover',   handleDragOver);
    item.addEventListener('dragenter',  handleDragEnter);
    item.addEventListener('dragleave',  handleDragLeave);
    item.addEventListener('drop',       handleDrop);
    // 添加touch事件监听（兼容Android）
    item.addEventListener('touchstart',  handleTouchStart);
    item.addEventListener('touchmove',   handleTouchMove);
    item.addEventListener('touchend',    handleTouchEnd);
    item.addEventListener('touchcancel', handleTouchCancel);
}

// -------------------------- 桌面端drag事件处理 --------------------------
var handleDragStart = function(e) {
    this.style.opacity = '0.4';
    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
}

var handleDragEnd = function(e) {
    this.style.opacity = '1';
    items.forEach(function (item) {
        item.classList.remove('over');
    });
}

var handleDragOver = function(e) {
    e.preventDefault();
    return false;
}

var handleDragEnter = function(e) {
    this.classList.add('over');
}

var handleDragLeave = function(e) {
    this.classList.remove('over');
}

var handleDrop = function(e) {
    e.stopPropagation();
   
    if (dragSrcEl !== this) {
        swapElements(dragSrcEl, this);
    }

    return false;
}

// -------------------------- Android端touch事件处理 --------------------------
var handleTouchStart = function(e) {
    e.preventDefault();
    const touch = e.touches[0];
    touchStartX = touch.clientX;
    touchStartY = touch.clientY;
    dragSrcEl = this;

    // 启动长按定时器
    longPressTimer = setTimeout(() => {
        isDragging = true;
        dragSrcEl.style.opacity = '0.4';
        // 添加拖动时的视觉反馈类
        dragSrcEl.classList.add('dragging');
    }, longPressDelay);
}

var handleTouchMove = function(e) {
    if (!isDragging) return;

    e.preventDefault();
    const touch = e.touches[0];
    const deltaX = touch.clientX - touchStartX;
    const deltaY = touch.clientY - touchStartY;

    // 拖动元素的视觉跟随
    dragSrcEl.style.transform = `translate(${deltaX}px, ${deltaY}px)`;

    // 检测当前触摸位置下的目标元素
    const targetElement = document.elementFromPoint(touch.clientX, touch.clientY);
    if (targetElement && targetElement.classList.contains('expander')) {
        items.forEach(item => item.classList.remove('over'));
        targetElement.classList.add('over');
    }
}

var handleTouchEnd = function(e) {
    clearTimeout(longPressTimer);
    if (!isDragging) return;

    isDragging = false;
    dragSrcEl.style.opacity = '1';
    dragSrcEl.style.transform = '';
    dragSrcEl.classList.remove('dragging');

    // 获取松开位置的目标元素
    const touch = e.changedTouches[0];
    const targetElement = document.elementFromPoint(touch.clientX, touch.clientY);

    if (targetElement && targetElement.classList.contains('expander') && dragSrcEl !== targetElement) {
        swapElements(dragSrcEl, targetElement);
    }

    items.forEach(item => item.classList.remove('over'));
}

var handleTouchCancel = function(e) {
    clearTimeout(longPressTimer);
    isDragging = false;
    if (dragSrcEl) {
        dragSrcEl.style.opacity = '1';
        dragSrcEl.style.transform = '';
        dragSrcEl.classList.remove('dragging');
    }
    items.forEach(item => item.classList.remove('over'));
}

// 通用元素交换函数
var swapElements = function(el1, el2) {
    const tempHTML = el1.innerHTML;
    el1.innerHTML = el2.innerHTML;
    el2.innerHTML = tempHTML;
    devices.reorderByDom();
}

export{init}

关键修改说明 #

1. 清理冗余代码：删除重复定义的handleDragStart和handleDragEnd函数。
2. 新增touch事件支持：添加触摸事件监听逻辑，适配Android端的触摸操作。
3. 长按触发机制：通过500ms定时器实现长按触发拖拽，避免点击操作误触发。
4. 视觉反馈优化：拖动时改变元素透明度、添加拖拽类、实现元素跟随触摸位置移动的效果。
5. 统一交换逻辑：将元素交换代码抽为通用函数，同时供drag和touch事件调用，减少冗余。
6. 误触防护：设置拖动阈值，只有触摸移动距离超过阈值才判定为拖拽操作。

内容的提问来源于stack exchange，提问作者Dr.Random