Mouse cursor should change to 'no-drop' when item dragged over not allowed dropZone

[brunowalraven]

• I'm submitting a ... [x ] bug report [ ] feature request [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug? Report a bug

• What is the current behavior? When you drag an element over a dropZone that it is not allowed to drop, mouse cursor stays as the move icon.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.

• Drag an element over a dropZone which is not included on the allowed dropZone
• Mouse cursor will stay as the move cursor
• plnkr: http://embed.plnkr.co/JbG8Si (ng2-dnd plnkr - check the Zone Areas example)

• What is the expected behavior?

• Drag an element over a dropZone which is not included on the allowed dropZone
• Mouse cursor should change to the no-drop cursor

• What is the motivation / use case for changing the behavior? The mouse cursor should chance to no-drop when dragging over a dropZone on which the item is not allowed to be dropped to give the user the feedback that the action is not allowed.

• Please tell us about your environment:

• Angular version: 4.4.3
• Browser: [Chrome 64]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[COLTstreet]

Any movement or a workaround for this type of behavior?

[wizips]

You can do something like this:

1. Add in app.component.ts:

        this._dragulaService.drag.subscribe((result) => {
            if (document.body.classList.contains(`cloned-copy`)) {
                document.body.classList.add('noDropDocument');
            } else {
                result[1].classList.add(`${result[0]}-dropAllowed`);
            }
        });
        this._dragulaService.over.subscribe((result) => {
            if (result[2].classList.contains(`${result[0]}-dropAllowed`)) {
                document.body.classList.add('drag-over');
                document.body.classList.remove('noDropDocument');
            }
        });
        this._dragulaService.out.subscribe((result) => {
            if (result[2].classList.contains(`${result[0]}-dropAllowed`)) {
                document.body.classList.remove('drag-over');
                document.body.classList.add('noDropDocument');
            }
        });
        this._dragulaService.shadow.subscribe((result) => {
            if (document.body.classList.contains('drag-over')) {
                document.body.classList.remove('noDropDocument');
            }
            if (!result[2].classList.contains(`${result[0]}-dropAllowed`)) {
                document.body.classList.add('drag-over');
                document.body.classList.remove('noDropDocument');
                result[2].classList.add(`${result[0]}-dropAllowed`);
            }
        });
        this._dragulaService.dragend.subscribe(() => {
            document.body.classList.remove('noDropDocument', 'cloned-copy', 'cloned-mirror', 'drag-over');
        });
        this._dragulaService.cloned.subscribe((result) => {
            document.body.classList.add(`cloned-${result[3]}`);
        });

2. Add in app.component.scss:

::ng-deep { 
  .noDropDocument * {
   cursor: no-drop!important;
   &:active {
    cursor: no-drop!important;
   }
  }
  .drag-hand {
   cursor: move; /* fallback if grab cursor is unsupported */
   cursor: grab;
   /* (Optional) Apply a "closed-hand" cursor during drag operation. */
   &:active {
    cursor: grabbing;   
   } 
  }
}

3. Use for drag element class: drag-hand

[Chealer]

Which version does this affect? It seems to me a no-drop-like cursor shows for illegal targets if I take as reference the Multi list sortable example on https://akserg.github.io/ng2-webpack-demo/#/dnd