Safari拖拽对象时无法切换grabbing光标问题求助

Safari对原生拖拽事件的光标控制有特殊限制——拖拽过程中它会强制使用系统默认的拖拽光标，直接修改拖拽元素的cursor样式会被忽略，这就是问题的核心原因。下面是简单有效的解决思路：

解决步骤 #

• 放弃直接修改拖拽元素的cursor，转而给document.body添加全局光标样式，用全局样式覆盖系统默认
• 给拖拽元素添加-webkit-user-drag: none，禁用Safari原生的拖拽光标行为

修改后的完整代码 #

HTML（无需改动）

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="box" draggable="true"></div>
</body>
</html>

CSS

.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
    cursor: grab;
    /* 禁用Safari原生拖拽光标 */
    -webkit-user-drag: none;
}

/* 全局拖拽状态光标 */
body.grabbing {
    cursor: grabbing;
}

JS

const box = document.querySelector('.box');

box.addEventListener('dragstart', () => {
    document.body.classList.add('grabbing');
})

box.addEventListener('dragend', () => {
    document.body.classList.remove('grabbing');
})

原理说明 #

1. -webkit-user-drag: none 让Safari不再对该元素使用原生拖拽光标，解除系统对光标的强制控制
2. 通过给body添加/移除grabbing类，实现全局范围内的光标切换，这种方式不会被Safari的拖拽机制拦截

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