角拖放事件不起作用`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",