angular - 如何在 Angular CDK 中实现 DragOver 函数？

Question

我已经尝试过不同的软件包。不幸的是，我什至不能用它们中的大多数来拖动我的元素。

使用 CDK，可拖动的工作正常。但是我想在将图像 A 拖到图像 B 时立即触发一个动作。不幸的是，这不起作用。我上次尝试使用 DropList 对其进行测试，所以请不要对我的代码感到困惑。

我真正需要的只是一个函数，例如： html image B: <img (dragOver)="dragOver($event)">

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import {CdkDragEnd, CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-care',
  templateUrl: './care.component.html',
  styleUrls: ['./care.component.css']
})
export class CareComponent implements OnInit {
public imgStyle = 0.8;
 breedExternal: Number = Math.floor(Math.random() * 13) + 1;
  constructor() { this.imgStyle = 0.8; }
  ngOnInit(): void {  }

onDragEnded(event: CdkDragEnd): void {
        event.source._dragRef.reset();
}

 drop(event: CdkDragDrop<string[]>) {
   console.log("drop");
  }


  dragOver(event: CdkDragDrop<string[]>) {
  console.log("dragover works");
}



}

<div class="row" id="tab_care" >
        <div class="col-2">
<img id="brush" src="A" class="draggable" cdkDrag cdkDragBoundary="#tab_care"   (cdkDragEnded)="onDragEnded($event)" #brush>
</div>
<div class="col-10">
<img src="B" id="dropzone" cdkDropList cdkDragHandle
         [style.opacity]="imgStyle" 
         (cdkDropListEnter)="dragOver($event)"
  dragOverClass="drop-over-active">
        </div>
</div>

非常感谢您的关注。

标签： angulardrag-and-dropdraggableangular-cdk