Tauri + Angular 16 拖放

Question

我一直在尝试实现简单的 html 拖放到 tauri + Angular 中，但我无法让它工作。我只需要基本的拖放操作。

仅触发 Dragstart 事件。拖动和放置不会，我找不到原因。

这是我的组件：

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

我尝试不使用 Angular 的事件，而是使用默认的事件（ondragstart、ondrop 等），但它也不起作用。而它可以在纯 html 文件中工作。

Answer 1

试试这个

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);
        }
    }
    
    }