为何cdkDragEntered事件在cdkDrag元素进入容器时未触发？

我希望在非可拖拽、非可放置的容器中，当cdkDrag元素进入时触发事件，但目前cdkDragEntered事件完全没反应。以下是我的代码：

HTML代码 #

<div
  class="dragarea"
  [ngClass]="{ 'bg-blue': isDragging }"
  (cdkDragEntered)="onDragEnter($event)"
>
  drag area
</div>
<div>
  <ul>
    <li *ngFor="let item of items" cdkDrag>{{ item.name }}</li>
  </ul>
</div>

Component代码 #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-drag',
  templateUrl: './drag.component.html',
  styleUrls: ['./drag.component.css'],
})
export class DragComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  isDragging!: boolean;
  onDragEnter(event: any): void {
    this.isDragging = true;
    console.log('hello');
  }
  items = [
    { id: 1, name: 'shray' },
    { id: 2, name: 'rocket' },
    { id: 3, name: 'cod' },
    { id: 4, name: 'halo' },
  ];
}

CSS代码 #

.dragarea {
  width: 100px;
  height: 100px;
  background-color: grey;
}
.bg-blue {
  background-color: blue;
}

解决方案 #

Angular CDK的cdkDragEntered事件默认仅在带有cdkDropList指令的容器上触发，普通容器不会监听拖拽进入行为。提供两种实现方式：

方式一：给容器添加cdkDropList（最简单） #

给目标容器添加cdkDropList指令，同时用cdkDropListDisabled禁用放置功能，这样既不会允许拖拽项放置，又能触发进入事件：

<div
  class="dragarea"
  [ngClass]="{ 'bg-blue': isDragging }"
  cdkDropList
  cdkDropListDisabled
  (cdkDragEntered)="onDragEnter($event)"
>
  drag area
</div>

你的Component代码无需修改，事件会正常触发。

方式二：全局拖拽事件监听 #

通过DragDrop服务监听全局拖拽进入事件，判断目标元素是否为你的容器：

1. 修改Component代码：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { DragDrop, DragEnter } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag',
  templateUrl: './drag.component.html',
  styleUrls: ['./drag.component.css'],
})
export class DragComponent implements OnInit {
  @ViewChild('dragarea') dragarea!: ElementRef<HTMLDivElement>;
  isDragging!: boolean;

  constructor(private dragDrop: DragDrop) {}

  ngOnInit() {
    this.dragDrop.dragEntered.subscribe((event: DragEnter) => {
      if (event.element === this.dragarea.nativeElement) {
        this.isDragging = true;
        console.log('hello');
      }
    });
  }

  items = [
    { id: 1, name: 'shray' },
    { id: 2, name: 'rocket' },
    { id: 3, name: 'cod' },
    { id: 4, name: 'halo' },
  ];
}

2. 给HTML容器添加模板引用变量：

<div
  #dragarea
  class="dragarea"
  [ngClass]="{ 'bg-blue': isDragging }"
>
  drag area
</div>

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