How to change the cursor in React DnD using react-dnd-multi-backend

134 Views Asked by At

How can I change the cursor when dragging an item? I am using Preview. Found a variant using touch backend but it does not suit me. Maybe someone has encountered something similar

const DragItem: React.FC<DragItemProps> = (props) => {
  const { item } = props;
  const { blockName, itemParams } = item;
  const { image } = itemParams;
  const nameBlock = blockName.toLowerCase();

  const [{ isDragging }, dragRef, preview] = useDrag(
    () => ({
      type: 'container',
      item: () => item
      collect: (monitor) => ({ isDragging: monitor.isDragging() }),
    }),
    [item]
  );

  useEffect(() => {
    preview(getEmptyImage());
  }, []);

 
  return (
    <Image
      src={src}
      alt={String(image.icon)}
      width={36}
      height={36}
      ref={dragRef}
      draggable={true}
      style={{
        cursor: 'grabbing',
        opacity: isDragging ? 0 : 1,
        pointerEvents: isDragging ? 'none' : 'auto',
        visibility: isDragging ? 'hidden' : 'visible',
      }}
    />
  );
};

I tried at the start of the drag event to put a style with the desired cursor for all elements in the body. I tried changing the cursor in dragItem and preview

0

There are 0 best solutions below