typescript - Angular 拖放事件不起作用 `drop` 事件未触发

Question

一段代码行为异常，我不知道最近发生了什么变化，但其中一部分不起作用。
HTML

<div class="projectList_main" *ngIf="testCaseSec">
  <div class="backgroundColor" *ngIf="!testCaseDetail">
    <div class="backgroundinner">
      <p class="draganddrop">DRAG AND DROP HERE</p>
      <div class="row paddingrow">
        <div class="col-md-6 borderright" (drop)="onDrop1($event);" (dragover)="onDragOver($event)"  >
          <img src="./assets/images/existingplan.png" class="existingplanimg"/>
          <p class="add">ADD TO EXISTING SCENARIO</p>
        </div>
        <div class="col-md-6" (dragover)="onDragOverCreate($event)" (drop)="onDropCreate($event);" >
          <img src="./assets/images/createplan.png" class="createplanimg" />
          <p class="add">CREATE NEW SCENARIO</p>
        </div>
      </div>
    </div>
  </div>

正如您在控制台中看到的那样 onDragOver($event)工作正常，如 onDrop1($event);没有。
它还仅在该点上显示停止光标指针，但该位置应该是可放置的。
在第二种情况下右侧它也可以正常工作。

Answer 1

您需要遵守 ondragover <-> ondrop convention .
这对于您的 stackblitz 示例实际上意味着 login.component.ts 中添加的这 3 行:

...
onDragOver(ev: any) {
    ev.stopPropagation();        // <---
    ev.preventDefault();         // <---
    console.log("onDragOver");
...

onDrop1(ev: any) {
    ev.preventDefault();      // <---
    console.log(
      "cDrop Create",