Angular14中angular2-draggable的ngDraggable拖放事件不触发求助

我之前也碰到过这个问题，angular2-draggable的ngDraggable指令其实是基于鼠标/触摸事件自己实现的拖拽逻辑，并没有复用HTML5原生的拖拽API，所以原生的dragover和drop事件自然不会被触发。下面给你几个可行的解决方案，按推荐程度排序：

• 使用库内置的拖拽/放置事件系统（最推荐）
  angular2-draggable提供了配套的ngDropzone指令来处理放置逻辑，完全适配它的拖拽机制，替换原生事件监听即可：
  首先给目标区域添加ngDropzone指令并绑定对应事件：

  <div ngDropzone (onDrop)="handleNgDrop($event)" (onDragOver)="handleNgDragOver($event)">
    Drop Area
  </div>
  

  然后在组件类中实现处理方法：

  handleNgDrop(event: any) {
    // event.dragData 可以获取拖拽元素传递的数据
    console.log('元素已放置:', event.dragData);
    // 这里写你的放置逻辑
  }
  
  handleNgDragOver(event: any) {
    console.log('拖拽元素经过放置区域');
    // 可选：处理拖拽经过时的样式变化等
  }
  

  同时，你可以给ngDraggable元素设置dragData来传递自定义数据：

  <span ngDraggable [dragData]="{id: 1, content: 'ngDraggable元素'}">ngDraggable</span>
  

  这个方案完全遵循库的设计，兼容性和稳定性都最好。

• 通过鼠标位置判断实现放置逻辑（适合简单场景）
  如果不想额外引入ngDropzone，可以监听拖拽过程中的鼠标位置，判断是否在目标区域内，然后在拖拽结束时处理放置：
  先给目标区域加模板引用：

  <div #dropZone>Drop Area</div>
  <span ngDraggable (dragMove)="onDragMove($event)" (dragEnd)="onDragEnd($event)">ngDraggable</span>
  

  然后在组件中实现逻辑：

  import { ElementRef, ViewChild } from '@angular/core';
  
  @ViewChild('dropZone') dropZoneElement!: ElementRef<HTMLDivElement>;
  private isOverZone = false;
  
  onDragMove(event: any) {
    const zoneRect = this.dropZoneElement.nativeElement.getBoundingClientRect();
    // 判断鼠标坐标是否在目标区域范围内
    this.isOverZone = event.clientX >= zoneRect.left && event.clientX <= zoneRect.right &&
                      event.clientY >= zoneRect.top && event.clientY <= zoneRect.bottom;
  }
  
  onDragEnd(event: any) {
    if (this.isOverZone) {
      console.log('元素成功拖放到目标区域');
      // 执行你的放置逻辑
    }
    this.isOverZone = false;
  }
  

  这种方式不需要依赖额外指令，适合简单的放置场景。

• 手动模拟原生拖拽事件（hack方式，不推荐）
  如果非要使用原生的dragover和drop事件，可以在ngDraggable的拖拽开始时手动触发原生拖拽流程，但可能和库的内置逻辑冲突：
  给拖拽元素绑定库的dragStart事件：

  <span ngDraggable (dragStart)="triggerNativeDrag($event)">ngDraggable</span>
  

  组件中实现触发逻辑：

  triggerNativeDrag(event: any) {
    const dragElement = event.element;
    // 开启原生draggable属性
    dragElement.setAttribute('draggable', 'true');
    // 手动创建并触发原生dragstart事件
    const nativeDragStart = new DragEvent('dragstart', { bubbles: true, cancelable: true });
    // 给事件添加dataTransfer对象（需要手动定义，因为默认DragEvent的dataTransfer是只读的）
    Object.defineProperty(nativeDragStart, 'dataTransfer', {
      value: new DataTransfer()
    });
    // 设置传递的数据
    nativeDragStart.dataTransfer.setData('text/plain', '来自ngDraggable的数据');
    dragElement.dispatchEvent(nativeDragStart);
  }
  

  这种方法可能会导致两种拖拽逻辑同时运行，出现奇怪的行为，只在特殊需求下使用。

内容的提问来源于stack exchange，提问作者JRS