如何在拖拽操作中隐藏或更改“不允许拖拽”光标？

嘿，我完全懂你这种“明明应该很简单却卡壳”的感觉！拖拽时那个禁止光标确实容易让人挠头，其实核心是要告诉浏览器哪些区域允许放置，再结合CSS自定义光标，就能搞定了。

咱们先从你的代码入手，看看关键的改进点：

1. 先搞定浏览器的默认行为 #

浏览器显示禁止光标，本质是因为它觉得当前区域不允许放置拖拽元素。所以你需要确保所有可能被拖拽经过的区域，都正确处理dragenter和dragover事件，并调用e.preventDefault()——这一步是告诉浏览器“这里可以放！”。

另外，在dragover里设置dropEffect也很重要，它会告诉浏览器你要执行的拖拽操作类型（比如移动、复制），浏览器会自动匹配对应的光标：

function dragOver(e) {
  e.preventDefault();
  // 指定拖拽操作类型，浏览器会显示对应光标（比如move对应移动光标）
  e.dataTransfer.dropEffect = 'move';
}

2. 用CSS自定义光标样式 #

如果还想更精准地控制光标，比如拖拽时全局用“抓取”光标，或者在可放置区域用“可放置”光标，就可以用CSS来实现：

/* 拖拽过程中，全局页面的光标 */
body.dragging {
  cursor: grabbing;
}

/* 当拖拽元素进入可放置区域时的光标 */
.dropzone {
  cursor: grab;
}

然后在JS里配合添加/移除类：

function dragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
  setTimeout(() => {e.target.classList.add('boxh');}, 0);
  // 拖拽开始时，给body加类，全局改光标
  document.body.classList.add('dragging');
}

function dragend(e) {
  e.target.classList.remove('boxh');
  // 拖拽结束后恢复原样
  document.body.classList.remove('dragging');
  // 顺便清空所有dropzone类
  document.querySelectorAll('.dropzone').forEach(el => el.classList.remove('dropzone'));
}

function dragEnter(e) {
  e.preventDefault();
  // 进入可放置区域时添加类，改光标
  e.target.classList.add('dropzone');
}

// 别忘了添加dragleave事件，离开时移除类
function dragLeave(e) {
  e.target.classList.remove('dropzone');
}

// 给元素绑定dragleave事件
box0.addEventListener('dragleave', dragLeave);
container.addEventListener('dragleave', dragLeave);

3. 检查遗漏的区域 #

还要注意页面上的其他元素——如果拖拽经过某个没处理dragenter/dragover的元素，还是会出现禁止光标。所以要么给这些元素也绑定事件，要么直接给document绑定全局的dragenter和dragover事件（但要注意不要影响其他拖拽逻辑）。

这样调整后，你应该就能彻底摆脱那个讨厌的禁止光标，换成你想要的样式啦！

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