Tauri + Angular 16 Drag And Drop

Question

I have been trying to implement simple html drag and drop into tauri + angular but I cannot get it to work. I only need a basic drag and drop.

Only the dragstart event fires. dragover and drop does not and I cannot find why.

Here is my component:

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    greetingMessage = "";

    onDragOver(event: DragEvent) {
        event.preventDefault();
        console.log("drag over", event);
    }

    onDrop(event: DragEvent) {
        event.preventDefault();
        console.log("drop event", event);
    }

    onDragStart(event: DragEvent) {
        console.log("drag started", event);
    }
}

app.component.html

<div id="dropzone" (dragover)="onDragOver($event)" (drop)="onDrop($event)"> DROP HERE</div>

<img draggable="true" src="https://picsum.photos/200/300" alt="a draggable image" (dragstart)="onDragStart($event)">

I tried not using angular's events and rather the default ones (ondragstart, ondrop, etc) and it would not work either. Whereas it would work in a plain html file.

Answer 1

Try this

app.component.html

      <div id="dropzone" (dragover)="onDragOver($event)" (drop)="onDrop($event)"> DROP HERE</div>
      <img
      draggable="true"
      src="https://picsum.photos/200/300"
      alt="a draggable image"
      (dragstart)="onDragStart($event)"
    >
   

app.component.ts

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'draganddrop';
      greetingMessage = "";
    
        onDragStart(event: DragEvent) {
            console.log("drag started", event);
        }
        onDragOver(event: DragEvent) {
          event.preventDefault();
          console.log("drag over", event);
      }
    
      onDrop(event: DragEvent) {
        event.preventDefault();
        console.log("drop event", event);
    
        const dropZone = event.target as HTMLElement;
    
        if (dropZone.id === 'dropzone') {
            const imageUrl = 'https://picsum.photos/200/300';
            const droppedElement = document.createElement('img');
            droppedElement.src = imageUrl;
            droppedElement.alt = 'a dropped image';
            droppedElement.style.height = '200px';
            dropZone.appendChild(droppedElement);
        }
    }
    
    }
   

Answer 2

After some more research I found out it was coming from the tauri config file:

For drag and drop to work you have to disable the "fileDropEnabled" field which is on true by default.

From the docs:

WindowConfig

fileDropEnabled

Whether the file drop is enabled or not on the webview. By default it is enabled.

Disabling it is required to use drag and drop on the frontend on Windows.

tauri.conf.json

{
    "tauri": {
        "windows": [
            {
                "fileDropEnabled": false
            }
        ]
    }
}