Firefox安卓端JS Drag&Drop功能失效问题求助

你的拖拽测验依赖HTML5原生拖拽API，但安卓平台的Firefox移动端对原生drag事件的触摸支持不完善，触摸操作无法触发dragstart等事件，导致功能失效。需要补充触摸事件的处理逻辑，同时保留桌面端的原生drag支持，实现跨端兼容。

完整兼容代码 #

HTML + CSS + JS #

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 基础样式，可视化拖拽状态 */
.handles {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
}
.handle {
  display: inline-block;
  padding: 8px 12px;
  margin: 5px;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: grab;
}
.handle.drag-start {
  opacity: 0.5;
}
.targets {
  display: flex;
  gap: 20px;
}
.target {
  flex: 1;
  padding: 20px;
  border: 2px dashed #ccc;
  text-align: center;
}
.target.drag-enter {
  border-color: #2196F3;
  background: #e3f2fd;
}
/* 触摸拖拽镜像元素样式 */
.drag-mirror {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 8px 12px;
  opacity: 0.8;
}
</style>
</head>
<body>

<div class="step">
    <div class="handles">
        <div class="handle" id="handle4" data-target="omnivor" draggable="true">Meat</div>
        <div class="handle" id="handle1" data-target="vegan" draggable="true">Cocoa</div>
        <div class="handle" id="handle2" data-target="vegan" draggable="true">Banana</div>
        <div class="handle" id="handle3" data-target="omnivor" draggable="true">butter</div>
    </div>
    <div class="targets">
        <div id="target1" class="target">vegan</div>
        <div id="target2" class="target">omnivor</div>
    </div>
</div>
<!-- 拖拽镜像容器 -->
<div id="drag-mirror-container"></div>

<script>
window.addEventListener("load", function() {
    let handlesContainer = document.querySelector(".handles");
    handlesContainer.style.height = handlesContainer.offsetHeight+"px";

    let handles = document.querySelectorAll(".handles .handle");
    let targets = document.querySelectorAll(".targets .target");
    const mirrorContainer = document.getElementById('drag-mirror-container');
    let currentDragElement = null;
    let currentMirror = null;

    // --- 桌面端原生拖拽逻辑 ---
    handles.forEach(handle => {
        handle.addEventListener("dragstart", function(e) {
            e.stopPropagation();
            e.dataTransfer.setData('text/plain', this.id);
            this.classList.add("drag-start");
        });

        handle.addEventListener("dragend", function(e) {
            e.stopPropagation();
            this.classList.remove("drag-start");
        });
    });

    targets.forEach(target => {
        target.addEventListener("dragenter", function(e) {
            e.preventDefault();
            this.classList.add("drag-enter");
        });

        target.addEventListener("dragleave", function() {
            this.classList.remove("drag-enter");
        });

        target.addEventListener("dragover", function(e) {
          e.preventDefault();
        });

        target.addEventListener("drop", handleDrop);
    });

    // --- 移动端触摸拖拽逻辑 ---
    handles.forEach(handle => {
        handle.addEventListener('touchstart', function(e) {
            e.preventDefault(); // 阻止页面滚动干扰
            currentDragElement = this;
            this.classList.add("drag-start");

            // 创建拖拽镜像元素
            currentMirror = document.createElement('div');
            currentMirror.className = 'drag-mirror';
            currentMirror.textContent = this.textContent;
            const rect = this.getBoundingClientRect();
            currentMirror.style.width = rect.width + 'px';
            currentMirror.style.height = rect.height + 'px';
            updateMirrorPosition(e.touches[0]);
            mirrorContainer.appendChild(currentMirror);
        }, { passive: false });

        handle.addEventListener('touchmove', function(e) {
            if (!currentMirror) return;
            updateMirrorPosition(e.touches[0]);

            // 实时检测触摸点是否进入目标区域
            targets.forEach(target => {
                const targetRect = target.getBoundingClientRect();
                const touchX = e.touches[0].clientX;
                const touchY = e.touches[0].clientY;

                if (touchX >= targetRect.left && touchX <= targetRect.right &&
                    touchY >= targetRect.top && touchY <= targetRect.bottom) {
                    target.classList.add("drag-enter");
                } else {
                    target.classList.remove("drag-enter");
                }
            });
        });

        handle.addEventListener('touchend', function(e) {
            if (!currentDragElement) return;
            currentDragElement.classList.remove("drag-start");

            // 匹配触摸结束位置的目标区域
            let matchedTarget = null;
            const touchX = e.changedTouches[0].clientX;
            const touchY = e.changedTouches[0].clientY;

            targets.forEach(target => {
                const rect = target.getBoundingClientRect();
                if (touchX >= rect.left && touchX <= rect.right &&
                    touchY >= rect.top && touchY <= rect.bottom) {
                    matchedTarget = target;
                }
                target.classList.remove("drag-enter");
            });

            // 处理拖拽结果
            if (matchedTarget) {
                handleDrop({
                    dataTransfer: {
                        getData: () => currentDragElement.id
                    },
                    target: matchedTarget
                });
            }

            // 清理镜像元素
            if (currentMirror) {
                currentMirror.remove();
                currentMirror = null;
            }
            currentDragElement = null;
        });
    });

    // 通用的拖拽完成处理函数
    function handleDrop(e) {
        e.stopPropagation();
        e.target.classList.remove("drag-enter");

        const elmnt = document.getElementById(e.dataTransfer.getData("text/plain"));
        if (elmnt.dataset.target === e.target.innerText.trim()) {
            console.log("正确分类");
        } else {
            console.log("分类错误");
        }
        elmnt.remove();
    }

    // 更新镜像元素的跟随位置
    function updateMirrorPosition(touch) {
        currentMirror.style.left = (touch.clientX - currentMirror.offsetWidth/2) + 'px';
        currentMirror.style.top = (touch.clientY - currentMirror.offsetHeight/2) + 'px';
    }
});
</script>
</body>
</html>

关键修复点说明 #

1. 补充触摸事件支持：针对移动端触摸事件（touchstart/touchmove/touchend）实现独立的拖拽逻辑，绕过安卓Firefox对原生drag事件的支持缺陷。
2. 拖拽镜像视觉反馈：创建跟随触摸点的镜像元素，替代原生drag的拖拽预览效果，保证移动端操作的直观性。
3. 统一结果处理逻辑：将桌面端和移动端的拖拽完成逻辑抽成通用函数，减少代码冗余。
4. 阻止页面滚动干扰：在touchstart中调用e.preventDefault()，避免拖拽时页面滚动影响操作。
5. 实时目标区域检测：在触摸移动过程中实时判断触摸点是否进入目标区域，同步更新视觉反馈。

修改后，拖拽功能可在所有现代浏览器（包括安卓Firefox移动端）正常运行。

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