Question

在此StackBlitz中，我有一个带mwlDraggable指令的div（请参见angular-draggable-droppable库）。

拖动动作很好，但是当我将其放到另一个div中时，我需要知道div的顶部/左侧坐标。 drop事件为我提供了鼠标指针的x / y坐标，但没有div的坐标。任何想法如何实现这一目标？我也愿意使用其他拖动库。

<div 
    mwlDraggable 
    [ghostDragEnabled]="true"
    [ghostElementTemplate]="ghostTemplate">
    Drag me!
</div>


<ng-template #ghostTemplate>
    <div style="width:50px;height:50px;border:2px dashed black"></div>
</ng-template>

Answer 1

为了在重影元素被删除时获取其坐标，我会听dragEnd事件并使用@ViewChild Angular装饰器：

template.html

<div 
    mwlDraggable 
    [ghostDragEnabled]="true"
    [ghostElementTemplate]="ghostTemplate"
    (dragEnd)="dragEnd($event)"  <==================== add this
    >
    Drag me!
</div>

<ng-template #ghostTemplate>
    <div #ghostEl ...></div>
         ^^^^^^^^
         and this
</ng-template>

component.ts

@ViewChild('ghostEl') ghostEl: ElementRef<any>;

dragEnd(event) {
  const droppedElement = this.ghostEl.nativeElement.parentNode;
  const { top, left } = droppedElement.getBoundingClientRect();
  console.log(top, left);
}

Forked Stackblitz

通过拖放获取div坐标

1 个答案: