JavaScript 如何修改网格布局中瓦片拖拽时的鼠标光标为指针样式

要实现拖拽过程中保持正常指针光标，你需要对CSS和JS事件处理逻辑做如下修改：

第一步：新增CSS样式 #

在你的CSS文件末尾添加以下代码，用于强制拖拽状态下的光标样式：

/* 拖拽状态下全局强制使用指针光标 */
body.dragging,
body.dragging #board,
body.dragging .tile {
    cursor: pointer !important;
}

第二步：修改JS事件处理函数 #

替换原有三个拖拽事件处理函数为以下代码：

function handleDragOver(e) {
    // 阻止浏览器默认的禁止放置行为，避免触发禁止光标
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
}

function handleDragStart(e) {
    // 原有隐藏拖拽虚影的逻辑保留
    let ghostImage = document.createElement('img');
    ghostImage.src = '';
    ghostImage.alt = '';
    e.dataTransfer.setDragImage(ghostImage, 0, 0);
    
    e.dataTransfer.effectAllowed = 'move';
    // 给页面添加拖拽状态标记，触发自定义光标样式
    document.body.classList.add('dragging');
}

function handleDragEnd(e) {
    // 拖拽结束后移除状态标记，恢复默认光标
    document.body.classList.remove('dragging');
}

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