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

user_3017390 0
Viewed 1896

A piece of code is misbehaving, I don't know what has changed lately, but part of it not working. 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>

mage

as you can see in console onDragOver($event) works fine where as onDrop1($event); dosen't. And it also shows stop cursor pointer on that point only but that place should be droppable. In second case right side It works fine on drop also.

angular7 typescript drag-and-drop
1 Answers

You'll need to adhere to the ondragover <-> ondrop convention.

What this practically means for your stackblitz example is these 3 added lines in login.component.ts:

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

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