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

一段代码运行异常，我不知道最近发生了什么变化，但部分代码无法工作。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); 则不行。而且它在那个点只显示停止光标指针，但那个位置本应该是可以放置的。在第二种情况下，右侧在放置时也能正常工作。

答案＃1

你需要遵循 ondragover <-> ondrop 约定。

对于你的 stackblitz 示例来说，这实际上意味着在 login.component.ts 中添加了这三行代码：

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

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