New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Customize the cursor during drag #325
Comments
You can probably set a |
Thanks, I wish that worked! Unfortunately, the cursor style is overridden by something (I'm on Chrome), even when setting the cursor style to document.body and marking it as "!important". Any other ideas? |
Maybe it's just how HTML5 drag and drop API works. In this case the only solution is to create a custom backend that uses mouse events instead of HTML5 drag and drop events. |
I was hoping you wouldn't say that :) Thanks! |
I've just found out about this issue. Unfortunately, it seems not posible to change the icon while dragging :( |
Anyone managed to resolve this? |
Also went and looked into this. Yes it seems that this is sadly a browser limitation in that the API for https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed So the only way to get around this is, as @gaearon mentioned, which is to use a different custom backend :/ This might be something worth including in the HTML5 backend documentation as that might not be something intuitive to people. |
Well a very wrong but working solution would be adding a :global {
body.dragging,
body.dragging * {
cursor: url('./assets/cursors/grabbing.cur'), move !important;
}
} |
Another approach using JS could be something like this: window.addEventListener('drag', () => {
document.body.style.cursor = 'grabbing';
}, true) It doesn't seem to be working consistently though... |
I can't get any of the suggested solutions here to work. Anything update on this? |
Switching to TouchBackend & using css to set cursor worked for me.
|
not working for me |
+1 |
someone managed to resolve this? |
switching to TouchBackend worked for me DnD provider:
Drag handlers implementation:
css file
|
Amazing that the TouchBackend actually worked using the solution outlined by @kurochkinSergei. Hopefully that doesn't introduce any regressions. |
Anyone have any success with this at all? Setting the document.body class does not work using HTML5 backend. |
Found a working solution. The trick is to update the draggable element's function MyDraggableComponent () {
const [{ isDragging }, drag] = useDrag(() => ({
...
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
}));
return (
<div ref={drag} style={{cursor: isDragging ? 'grabbing' : 'grab' }}>
Draggable Element
</div>
);
} See this minimum reproduction of the problem and the solution below: |
That codesandbox doesn't seem to work in Chrome 93.0.4577.82 (cursor not set to grabbing). |
@FermiDirak I just the tested the codesandbox on chorme 94.0.4606.81` and seems ok tome @hmeyerx |
is this different from what you're seeing? |
Any working solution for this in Chrome and Safari together? |
set useDrag({
...
options: {
dropEffect: 'copy'
}
}); |
Still nothing to fix this? |
What about using state on wrapper component? const style = (dragging: boolean) => ({
cursor: dragging ? "grabbing" : "unset",
width: 400
});
export const Container: FC = () => {
{
const [dragging, setDragging] = useState(false);
....
return (
<>
<div style={style(dragging)}>
{cards.map((card, i) => renderCard(card, i, dragging, setDragging))}
</div>
</>
);
}
}; Similar to FermiDirak's solution. The difference is that the useDrag method is used in the child component. |
On time drag cursor sometimes changes to pointer, sometimes changes to grabbing, but I want to each time drag it changed to grabbing, have you any solution ?
|
It looks like many people still try to use HTML5 backend and set cursor. That's not possible and here is Chrome bug for that (BTW Firefox works better with that): https://bugs.chromium.org/p/chromium/issues/detail?id=1232555 - feel free to star it at least - maybe that will help with visibility of this issue from Chrome side. Regular users do not care about this problem, it affects only In the end using Touch backend is the way to go - you still need to understand what you are doing but at least setting cursor works and is not blocked by Chrome somehow. IMHO touch backend is not worse than HTML5 backend and actually I found it being more responsive with custom drag layer. |
For those using a custom drag layer, I got mine working with TouchBackend. It didn't compromise any other functionality, as @daliusd suggests. Provider: <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>... CustomDragLayer: ...
return (
<div className='layer'>
<div
className='preview' >
{preview}
</div>
</div>
); CustomDragLayer scss: .layer {
position: fixed;
pointer-events: none;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
body {
// you can conditionally set this, only when dragging
* {
cursor: grabbing !important;
user-select: none // without this I get the text cursor in Safari
}
}
|
the above solution by @hein-j worked for me. the css wasn't required, just added this
|
Test on Safari and Firefox. In the end you might need css anyway. |
any update on this one? |
Read comments. It is Chrome bug. |
Oh ok, I'm so sorry to bother you |
Sorry for the tone 😄 I just tried to answer quickly 😉 |
all good brother 😁👍 |
Looks like same problem with Safari too. |
Custom cursor designs are the digital signature of user experience, offering a personal touch that resonates with visitors. For any forward-thinking marketing agency in Las Vegas, leveraging these bespoke elements is essential for crafting immersive and memorable interactions. |
Fantastic library! Thanks for all your hard work in putting it together. I have a quick question: is it possible to customize the cursor such that during a drag operation, the cursor is always set to the same thing (specifically I want to set it to the dragging icon)?
In other words, regardless of whether you are over a drop zone or not, the cursor remains the same. This is similar to how Trello has the cursor while dragging a note, for example.
Thanks in advance!
The text was updated successfully, but these errors were encountered: