search

reppners / ngx-drag-drop

Angular directives using the native HTML Drag And Drop API
https://reppners.github.io/ngx-drag-drop/
BSD 3-Clause "New" or "Revised" License
299 stars 118 forks source link

Question: Cursor grabbing #66

Closed nico281 closed 2 years ago

nico281 commented 5 years ago

Hi, how are you reppners? Its possible to change the cursor to grabbing for example while grabbing a element?

cheers!!

reppners commented 5 years ago

Hi, thanks I'm good 👍

I've put together a small example: https://stackblitz.com/edit/ngx-drag-drop-issue-template-gxpspj

nico281 commented 5 years ago

thanks for your reply. The question was regarding the default cursor while the item is dragging. But i think that is html5 native and you can't change it.

kamentk commented 4 years ago

Having the same issues. Is there any workaround to change the cursor for the whole life cycle of the dragging? It seems that the cursors are applied by the browsers as the DnD behaves in different ways in the both browsers.

VitaliiHoncharenko commented 3 years ago

any updates?

reppners commented 2 years ago

There are the css classes that are applied to the elements throughout the drag and drop lifecycle as showcased in the stackblitz above and documented in the API (https://github.com/reppners/ngx-drag-drop#api). This should enable to fully customize how the involved elements and the cursor looks like. What I've noticed though is that behaviour is glitchy.. it sometimes works, sometimes it doesn't and I think its related to timing and the drag image of the browser prevents the hit testing of CSS to apply the changed style after dragging starts. To workaround this the application could apply a style to the component or even the whole body on drag start and remove it on drag end to enable reliable global styling while dragging is in progress.

CSS also allows to use images, e.g.

.custom {
  /* The second value here is a fallback. */
  cursor: url(images/my-cursor.png), auto;

  /* You may need coordinates to adjust the pointer
     for example, the custom cursor is circular and you want
     the middle to be where you click */
  cursor: url(target.svg) 15 15, move;
}

If further advice is needed, let me know and I'll reopen.

EDIT: I've fiddled around with the stackblitz some more and whatever I changed.. it became more reliable for me..

https://stackblitz.com/edit/ngx-drag-drop-issue-template-xe3bt2?file=src%2Fapp%2Fapp.component.css