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",

Angular 拖放事件无效 `drop` 事件未触发

Angular drag and drop event is not working `drop` event is not firing

drag-and-drop

typescript

angular7