Question

当我将鼠标悬停在我的元素上时，我正在将光标更改为抓取：

.location:hover {
    border: 2px dashed #FF6600;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

工作正常。当用户抓住元素时，我想将其更改为抓取：

.location:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}

这不符合我的预期。当我单击并按住元素时，没有任何反应，只有在我发布它时它才会变为grabbing。然后当我点击并按住时，它会返回到grab，当我释放回grabbing时。如果我在鼠标变为grabbing后移动它，它会返回grab。我在悬停时需要grab，在点击并按住时grabbing。怎么样？

此外，当我实际拖动元素时，光标将返回默认值。我希望它保持grabbing直到我放弃元素。这可能吗？

更多代码：

HTML：

<div class="patients-container" [class.dragOver]="dragOver" (dragover)="allowDrop($event)" (dragleave)="onDragLeave()" (drop)="onDrop($event)">
  <div class="patient-box level-2" *ngFor="let bed of patientService.bedsLevel2">
    <div class="header-container">
      <div class="button-container">
        <button mat-raised-button id="close" (click)="closeLevel2(bed)"><mat-icon>close</mat-icon></button>
      </div>
      <p class="location" draggable="true" (dragstart)="onDrag($event, bed)">{{bed.philipsName}} - {{bed.patientName}}</p>
    </div>

.TS：

onDrag(event: any, bed: BedDetails) {
    event.dataTransfer.setData("bed", JSON.stringify(bed));
    event.dataTransfer.setData("from", "2");
  }

  allowDrop(event: any) {
    event.preventDefault();
  }

onDrop(event: any) {
    let movedBed: BedDetails = JSON.parse(event.dataTransfer.getData("bed"));
    let from = parseInt(event.dataTransfer.getData("from"));

    if (this.patientService.bedsLevel2.filter(bed => bed.cetreaName == movedBed.cetreaName).length == 0) {
      this.setChartData(movedBed);
      this.patientService.removePatient(from, movedBed.philipsName);
      this.patientService.bedsLevel2.push(movedBed);
    }

    this.dragOver = false;

  }

拖动时更改光标

0 个答案: