How to change cursor during drag?

[IAMtheIAM]

Hi, great framework. I'm trying to change the cursor during drag. Using CSS only doesnt seem to work.

gridsterItemPrototype

   .panel-heading {
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
   }

   .is-dragging {
      .panel-heading {
         cursor: move;
      }
   }

It stays as grab when hovering and during drag, and as soon as I let go of the mouse after drag, it flashes to the move and then back to drag.

So I figured I can try with javascript.

There is GridsterItemComponent and gridsterItemPrototypeDirective. Which one is better to use? What is the difference? I can't find the difference based on the docs, seems like they are two ways to do the same thing? Both have start and end drag events. Thanks for any help.

[swiety85]

Thanks!
Your CSS will work fine for GridsterItemComponents without any JS. The case is that GridsterItemComponents uses angular ViewEncapsulation, therefore above styles could not work if their are placed somewhere in parent component. To solve this issue you can put to common styles.css file or use >>> in you component styles to style elements in nested components.
The plan is to switch off ViewEncapsulation soon.
The gridsterItemPrototypeDirective elements are outside of gridster board, but has drag n drop behaviour (gray boxes in demo). The general idea of this directive is to allow users to add new items to board by dragging it from outside.
gridsterItemPrototypeDirective do not apply any class while dragging. If you want, you can do it manually:

<div gridsterItemPrototype ...
             (start)="$event.item.$element.classList.add('is-dragging')"
             (cancel)="$event.item.$element.classList.remove('is-dragging')">
</div>

But for that I will also provide natively is-dragging class like in GridsterItemComponents.

[IAMtheIAM]

Yes, I thought if I put in a shared common.css file globally applied, it would work. But for some reason, it does not. It has trouble changing the cursor during drag, only after the mouseup occurs. I am investigating to see what is causing this.

[IAMtheIAM]

Actually, it seems that this is only an issue with Chrome. Firefox has no problem to change the cursor during drag, while the mouse is still mousedown. Then it changes back after is-dragging is removed.

But chrome, cannot do this. That's weird.

UPDATE: Nevermind. now its working, lol. I updated all my node_modules and now it works. So I guess there was some other issue? Either way, it definitely works using the code above!

[swiety85]

I'm glad that it works for you now. Never the less I leave this issue open, to improve some CSS related parts in my project.
Write, in case of any other questions or suggestions.