React拖拽功能故障求助：拖拽元素无法正常转移

核心问题分析 #

从代码片段看，拖拽功能失效主要有几个关键原因：

1. dragStart事件被弹窗阻塞 #

当前dragStartHandler一触发就弹出提示框，alert会阻塞浏览器事件循环，直接打断拖拽流程，导致后续dragOver、drop等事件无法正常触发。

2. 未传递拖拽数据 #

原生拖拽API要求在dragStart时通过dataTransfer设置拖拽数据，否则目标元素无法识别拖拽对象，即使调用preventDefault也可能无法触发正常的drop操作。

3. 事件目标判断不准确 #

使用e.target可能因为元素嵌套或事件冒泡，获取到的不是绑定事件的目标元素，应该优先使用e.currentTarget（即绑定事件的元素本身）。

修复后的代码 #

const dragStartHandler = (e: React.DragEvent<HTMLImageElement>) => {
    // 设置拖拽数据，传递当前信封ID，用于后续匹配判断
    e.dataTransfer.setData('text/plain', currentId.toString());
    // 移除原弹窗，避免阻塞拖拽流程
    // alert('您未通过验证码')
}

const dragLeaveHandler = (e: React.DragEvent) => {
    // 确保操作的是绑定事件的箱子元素
    (e.currentTarget as Element).classList.remove('over')
}

const dragOverHandler = (e: React.DragEvent) => {
    e.preventDefault();
    // 必须阻止默认行为才能触发drop事件
    (e.currentTarget as Element).classList.add('over')
}

const dropHandler = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡，避免影响其他元素
    (e.currentTarget as Element).classList.remove('over');
    
    // 获取拖拽时传递的信封ID
    const draggedEnvelopeId = e.dataTransfer.getData('text/plain');
    const targetBoxId = (e.currentTarget as Element).id;

    if (draggedEnvelopeId === targetBoxId) {
        if (currentEnvelope.current) {
            (currentEnvelope.current as Element).classList.add('hide');
            alert('验证码通过！');
        }
        // 这里可以编写向后端发送请求的逻辑
    } else {
        alert('您未通过验证码');
        // toast.error('您未通过验证码', {
        //     position: "top-right"
        // })
    }
}

console.log(currentId)
return (
    <>
        <div className="post">
            <ToastContainer />
            <header className="post__header">
                <h3 className="title"></h3>
            </header>
            <main className="post__main">
                <img 
                    ref={currentEnvelope}
                    src={images[`envelope-${currentId}`]}
                    //src={require(`./assets/envelope${currentId}.png`)} 
                    alt="当前信封" 
                    className="current__envelope" 
                    id={`${currentId}`} 
                    draggable='true' 
                    onDragStart={dragStartHandler}
                />

                <div className="boxes">
                    <img 
                        src={require(`./assets/box1.png`)} 
                        alt="箱子" 
                        className="box" 
                        id="1"
                        onDrop={dropHandler}
                        onDragOver={dragOverHandler}
                        onDragLeave={dragLeaveHandler}
                    />
                </div>
            </main>
        </div>
    </>
)

额外排查建议 #

• 确认currentId的值是否正确：检查控制台输出的currentId，确保和目标箱子的id匹配时能触发正确逻辑。
• 验证CSS样式：检查hide类是否正确实现元素隐藏效果，over类是否能提供预期的拖拽视觉反馈。
• 排查全局干扰：检查是否有其他全局事件、样式（比如pointer-events: none）阻止了拖拽事件触发。

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