拖动文本时如何自定义光标样式？可通过CSS/JS保留default或pointer样式

解决方案 #

可以通过CSS或JS实现需求，具体方案如下：

CSS方案 #

如果无需保留文本选中功能，直接给目标元素设置以下样式即可：

/* 替换为你需要控制的元素选择器 */
.content-box {
  /* 禁用文本选中，从根源避免拖拽触发 */
  user-select: none;
  /* 固定光标样式，可替换为default */
  cursor: pointer;
}

JS方案 #

如果需要保留文本选中功能，只屏蔽拖拽时的禁止光标，监听拖拽事件阻止默认行为即可：

// 阻止文本的默认拖拽行为
document.addEventListener('dragstart', (e) => {
  // 仅对文本类元素生效，避免影响其他正常拖拽功能
  const isTextElement = e.target.nodeType === Node.TEXT_NODE 
    || ['P','SPAN','H1','H2','H3','H4','H5','H6','LI'].includes(e.target.tagName);
  if (isTextElement) {
    e.preventDefault();
  }
});

如果需要自定义拖拽逻辑，同时保持光标样式，可以额外添加以下逻辑：

// 拖拽过程中强制指定光标样式
document.addEventListener('dragover', (e) => {
  e.preventDefault();
  document.body.style.cursor = 'pointer';
});
// 拖拽结束后重置光标
document.addEventListener('dragend', () => {
  document.body.style.cursor = 'default';
});

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