Changing the cursor on drag operation

Question

Changing the cursor on drag operation

Having trouble changing the cursor while dragging an object? I'm struggling to find a solution to change the cursor properly during dragging.

My setup involves a React component where I attempted to change the cursor without success. Despite my efforts, the cursor remains the same during dragging (stuck as the default crossed circle).

function App() {
  const dragTarget = useRef(null);

  function dragStartHandler(e) {
    dragTarget.current.style.cursor = 'move';
  }

  function dragEndHandler() {
    dragTarget.current.style.cursor = 'auto';
  }

  return (
    <div
      draggable
      onDragStart={dragStartHandler}
      onDragEnd={dragEndHandler}
      id="dragTarget"
      className="draggable-element"
    >
      Drag me!
    </div>
  );
}

Seeking guidance on how to effectively control cursor styles during dragging. Any help is greatly appreciated.

Already tried the suggestions provided in previous answers, but no luck. Screenshots attached below: https://i.sstatic.net/PRvdR.png

html css reactjs

Answer 1

Answer №1

You have the option to apply styles using the :active selector:

div {
   cursor: grab;
}

div:active {
  cursor: grabbing;
}

Answer 2

You have the option to apply styles using the :active selector:

div {
   cursor: grab;
}

div:active {
  cursor: grabbing;
}

Answer 3

Answer №2

It is a common limitation that most browsers do not support changing the cursor style. The cursor style for a dragged element is typically controlled by the browser and cannot be overridden with CSS or JavaScript.

One workaround is to modify the cursor style of the entire document body, which will affect the cursor style for the entire page. You can achieve this by including the following code snippet in your project:

function dragStartHandler(e) {
document.body.style.cursor = 'move';
}

function dragEndHandler() {
document.body.style.cursor = 'auto';
}

Answer 4

It is a common limitation that most browsers do not support changing the cursor style. The cursor style for a dragged element is typically controlled by the browser and cannot be overridden with CSS or JavaScript.

One workaround is to modify the cursor style of the entire document body, which will affect the cursor style for the entire page. You can achieve this by including the following code snippet in your project:

function dragStartHandler(e) {
document.body.style.cursor = 'move';
}

function dragEndHandler() {
document.body.style.cursor = 'auto';
}

Changing the cursor on drag operation

Answer №1

Answer №2

Similar questions

Accessing the name attribute of option tags in a controller: A guide

Incorporating URL addresses and pagination features using React.Js and Material-UI components

add a border to an image when it is hovered over

What could be the reason for this JavaScript malfunctioning in both Chrome and Safari browsers?

What is the best way to connect images within my database?

Understanding how to deduce parameter types in TypeScript

FusionCharts Gauges may share similar code, but each one produces a unique output

What could be causing my Bootstrap Carousel to malfunction?

Refreshing the page using location.reload triggers a reload of various elements

There is a missing file extension "css" in the import/extensions for "typeface-roboto"

hiding html elements by using the display property set to none instead of physically removing

Is there a way to stop Material UI from dulling the color of my AppBar when using dark mode in my theme?

How to Make a Div Tag Fade Effect with JavaScript in an External File

Updating Variables in Azure DevOps Code Prior to DeploymentORModifying Variables

Launching a new tab with a specific URL using React

How can I show two unique chart modals simultaneously?

Use Python to enter a value on a webpage coded in HTML

Retrieving Information from Website Components in JavaFX Web View

Next.js 14: Issue with Framer Motion's useScroll not updating when applied to an element container

Begin counting starting from 1 all the way up to 24, then feel free