如何为拖拽、调整大小等不同操作分别设置自定义cursor样式

你当前配置不生效的核心原因是给.dragme全局加了带!important的光标规则，会覆盖所有场景下的光标样式，且没有针对不同操作状态做区分配置，按如下方式调整即可：

步骤1：删除原有CSS的!important声明 #

你原来的CSS里的!important会强制所有状态复用同一个光标，首先去掉：

/* 修改前（错误示例） */
.dragme {
  cursor: url("/images/cursor.png"), move !important; 
}

步骤2：按不同操作状态分别配置光标 #

给不同交互状态的类绑定对应自定义光标，示例如下：

/* 基础可移动状态：鼠标悬停未拖拽时 */
.dragme {
  cursor: url("/images/move-cursor.png"), move;
}

/* 拖拽激活状态 */
.dragme.is-dragging {
  cursor: url("/images/dragging-cursor.png"), grabbing;
}

/* 上下调整大小状态 */
.dragme.is-resizing-vertical {
  cursor: url("/images/resize-vertical.png"), ns-resize;
}

/* 左右调整大小状态 */
.dragme.is-resizing-horizontal {
  cursor: url("/images/resize-horizontal.png"), ew-resize;
}

/* 对角（右下）调整大小状态，其余对角方向同理替换光标和回退值即可 */
.dragme.is-resizing-diagonal {
  cursor: url("/images/resize-diagonal.png"), se-resize;
}

步骤3：交互触发时切换对应状态类 #

• 如果使用第三方拖拽/调整大小库（如interact.js、jQuery UI等），库本身会在触发对应操作时自动添加状态类，直接对应类名写CSS即可
• 如果是原生JS实现的交互，在监听到对应操作触发时（如拖拽启动、调整大小启动）给元素加上对应状态类，操作结束后移除即可

注意事项 #

• 自定义光标图片建议控制在32*32像素以内，避免浏览器自动缩放导致显示异常
• 每个自定义光标后必须保留系统默认回退光标值，避免自定义图片加载失败时光标显示异常

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