询问RC-tree拖拽光标名称及自定义RC-tree拖拽光标方法

1. 目标光标名称确认 #

你提到的这种光标是CSS标准光标里的 copy 光标——样式为箭头旁附带加号，正是浏览器默认的「选中文本拖拽到地址栏」时显示的光标，也是RC-tree拖拽功能默认使用的光标类型。

2. 在其他拖拽区域使用该光标 #

直接给目标拖拽元素添加CSS样式即可：

/* 给你的自定义拖拽区域设置光标 */
.custom-drag-area {
  cursor: copy;
  /* 兼容部分旧浏览器的前缀写法 */
  cursor: -webkit-copy;
  cursor: -moz-copy;
}

如果需要仅在拖拽触发时切换光标，可通过JS事件监听实现：

const dragArea = document.querySelector('.custom-drag-area');
dragArea.addEventListener('dragstart', () => {
  dragArea.style.cursor = 'copy';
});
dragArea.addEventListener('dragend', () => {
  dragArea.style.cursor = 'default';
});

3. 修改RC-tree拖拽时的光标样式 #

RC-tree在拖拽过程中会给相关元素自动添加特定类名，你可以通过自定义CSS覆盖默认样式：

/* 修改拖拽中源节点的光标 */
.rc-tree-node-dragging {
  cursor: grab !important; /* 替换为你需要的光标值，比如move、grabbing等 */
}

/* 修改拖拽时跟随鼠标的克隆节点光标 */
.rc-tree-drag-node {
  cursor: grabbing !important;
}

/* 修改拖拽占位符的光标（如果需要） */
.rc-tree-drag-placeholder {
  cursor: move !important;
}

如果上述类名不生效，建议用浏览器开发者工具（F12）查看拖拽状态下元素实际应用的类名，再针对性编写CSS。若不想用!important，可以通过增加父元素选择器来提高样式优先级（比如.your-wrapper .rc-tree-node-dragging）。

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