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