如何在Angular CDK中实现DragOver拖拽悬停触发功能

问题根因 #

你当前功能不生效是三个配置错误导致的：

• 事件名拼写错误：Angular CDK 投放区域监听拖拽元素进入的正确事件名是cdkDropListEntered，你代码里写的cdkDropListEnter少了末尾的ed，属于无效事件绑定，自然不会触发回调。
• 无效属性冗余：你在投放目标img标签上加了cdkDragHandle属性，这个属性是给可拖拽元素定义拖拽触发区域的，加在投放区域上没有作用，反而可能干扰事件传递。
• 事件参数类型错误：cdkDropListEntered 事件的参数类型是CdkDragEnter，不是你写的CdkDragDrop，类型不匹配可能导致运行时报错。

修正后代码 #

TS代码调整

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
// 新增导入CdkDragEnter类型
import {CdkDragEnd, CdkDragDrop, CdkDragEnter, 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的参数类型为CdkDragEnter
  dragOver(event: CdkDragEnter) {
    console.log("dragover works");
    // 此处直接写你需要触发的业务逻辑即可
  }
}

HTML代码调整

<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
      [style.opacity]="imgStyle" 
      <!-- 修正事件名为cdkDropListEntered，移除冗余的cdkDragHandle -->
      (cdkDropListEntered)="dragOver($event)"
      dragOverClass="drop-over-active"
    >
  </div>
</div>

补充说明 #

如果你需要判断进入投放区域的拖拽元素是不是指定的图片A，可以在cdkDrag上绑定[cdkDragData]自定义标识，在dragOver方法里通过event.item.data拿到标识做校验即可。

内容的提问来源于stack exchange，提问作者AnniW