Измените курсор для перетаскивания на nonDragZone или DraggableZone в Angular

Question

Мне нужно менять значок курсора всякий раз, когда перетаскиваем элемент в зону, недоступную для перетаскивания и перетаскивания. Как я могу добиться этого в angular. поэтому сначала я попытался установить предопределенный курсор «захват» при перетаскивании, но все еще не могу установить.

Значение по умолчанию выглядит как на снимке экрана (указатель с небольшим прямоугольником ниже), но мне нужно изменить это на пользовательское изображение или захват

Вот ссылка на код https://stackblitz.com/edit/hello-angular-6-wsyygt?file=src%2Fapp%2Fapp.component.html

CodeSnippet :

 <div>
   <div class="drag1" *ngFor="let vehicle of canBeCopy" draggable="true"  (dragstart)="onDragStart(vehicle,$event)" >
      <p>{{vehicle}}</p>
   </div>
</div>

<hr>
<div>
  <p>Drop Area</p>
<div class="availablevehicle" (dragover)="allowDrop($event)"(drop)="onDrop($event)">
   <div *ngFor="let vehicle of vehicles" >
      <p>{{vehicle}}</p>
   </div>
</div>
<div>

.ts файл

onDrop(ev) {
    let index = this.vehicles.findIndex((v)=>v==this.vehicle);
     if(index<0){
         this.vehicles.push(this.vehicle);
     }
     ev.target.style.cursor = "pointer"

  }
onDragStart(vehicle,event){
   this.vehicle = vehicle;
   event.target.style.cursor = "grabbing"
   console.log("vent",event);

}
  allowDrop(ev) {
    ev.dataTransfer.dropEffect = "copy";
     ev.target.style.cursor = "grabbing"

    ev.preventDefault();
  }

любое решение фрагмента кода заметно

Спасибо

Answer 1

Возможно, это не совсем то, что вы ищете, но проверьте добавление HostBinding / HostListener в директиву.

в директиве, вы можете создать HostBinding:

@HostBinding('style.cursor') private cursor = 'default';

Затем вы можете настроить таргетинг на события dragover через HostListener

@HostListener('dragover', ['$event']) onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.cursor = 'pointer' // any custom cursor would be assigned here
}

Вот хорошая ссылка https://alligator.io/angular/hostbinding-hostlistener/

Happy Coding!