如何在 ReactJs 中实现拖拽时改变鼠标光标样式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在 ReactJs 中实现拖拽时改变鼠标光标样式

2025-10-18

浏览次数：次

返回列表

如何在 reactjs 中实现拖拽时改变鼠标光标样式

本文将介绍如何在 ReactJs 应用中实现拖拽功能时，动态改变鼠标光标样式，以增强用户交互体验。通过监听拖拽事件，并使用 J*aScript 修改元素的 `cursor` 样式，可以轻松实现这一效果。

在 ReactJs 应用中，实现拖拽功能时，经常需要根据拖拽状态改变鼠标光标的样式，以提升用户体验。例如，在拖拽开始时将光标改为“抓取”状态，在拖拽结束时恢复默认状态。以下是如何实现这一效果的详细步骤。

1. 监听拖拽事件

首先，我们需要监听元素的 onDragStart、onDrag 和 onDragEnd 事件。这些事件分别在拖拽开始、拖拽过程中和拖拽结束时触发。

2. 修改光标样式

在相应的事件处理函数中，我们可以使用 J*aScript 修改元素的 style.cursor 属性来改变光标样式。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

示例代码：

import React, { useRef } from 'react';

function DraggableElement() {
  const elementRef = useRef(null);

  const handleDragStart = (event) => {
    if (elementRef.current) {
      elementRef.current.style.cursor = 'gra*g'; // 拖拽开始时设置为 "gra*g"
    }
  };

  const handleDragEnd = (event) => {
    if (elementRef.current) {
      elementRef.current.style.cursor = 'grab'; // 拖拽结束时设置为 "grab"
    }
  };

  return (
    <div
      ref={elementRef}
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'lightblue',
        cursor: 'grab', // 默认光标样式
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        userSelect: 'none', // 防止拖拽时选中文字
      }}
    >
      Drag Me
    </div>
  );
}

export default DraggableElement;